首页 › Github/Gitee开源交流 › 2024安装hexo和next并部署到github和服务器最新教程

运芳 發表於 2024-12-18 01:40:00

2024安装hexo和next并部署到github和服务器最新教程

<h2 id="正文">正文</h2>
<p><strong>你能找到这篇文章，相信你已经成功部署了hexo至本地</strong></p>
<p>当然，为了照顾还没有部署的小伙伴</p>
<p>我在这里提供简短的教程 具体步骤请百度<s>我觉得百度是世界上最大的广告站，到处都是广告</s> 也可以参考Hexo官方文档获取更详细的信息。</p>
<hr>
<p>这是我的blog网站 ivelisya's blog</p>
<p>如果有人需要源码请在评论区留言喔<s>其实是我想要多一点评论啦</s> 欢迎交流与分享！</p>
<p><img src="https://img2024.cnblogs.com/blog/3576666/202412/3576666-20241218013633882-1450261792.png"></p>
<hr>
<h3 id="hexo本地部署教程超简化版">hexo本地部署教程<s>超简化版</s></h3>
<h4 id="1下载安装基础运行程序">1.下载安装基础运行程序。</h4>
<ul>
<li>Git https://git-scm.com/</li>
<li>Node.js https://nodejs.org/en/</li>
</ul>
<h4 id="2安装hexo">2.安装hexo</h4>
<p>在你的node安装好并<strong>配置环境变量</strong>之后，会有一个npm命令</p>
<p>到你想要安装hexo的地方打开cmd</p>
<p>然后执行以下命令：</p>
<pre><code class="language-bash">npm install -g hexo   # 进行安装
hexo init             # 初始化
</code></pre>
<p>到这里你已经完成了一半了<s>是不是很简单</s></p>
<h4 id="3安装主题-毕竟原版不好看">3.安装主题 <s>毕竟原版不好看</s></h4>
<p>这里我使用 next 主题</p>
<p>我安装的版本是 nexT v8</p>
<p>我更推荐的版本也是 nexT v8，原因的话就是老版本bug有点多</p>
<table>
<thead>
<tr>
<th>年</th>
<th>版本号</th>
<th>仓库地址</th>
</tr>
</thead>
<tbody>
<tr>
<td>2014~2017</td>
<td>v5</td>
<td>GitHub 仓库</td>
</tr>
<tr>
<td>2018~2019</td>
<td>v6~v7</td>
<td>GitHub 仓库</td>
</tr>
<tr>
<td>2020</td>
<td>v8</td>
<td>GitHub 仓库</td>
</tr>
</tbody>
</table>
<p>安装主题就是站点根目录下直接 git clone 下来就可以了</p>
<p><code>git clone https://github.com/next-theme/hexo-theme-next</code>即可</p>
<ul>
<li>打开站点配置文件，将 <code>theme</code> 那项改成 <code>theme: next</code></li>
</ul>
<pre><code class="language-yml"># Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next
# 搜索
# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
</code></pre>
<ul>
<li>然后你就可以打开看看效果啦</li>
</ul>
<pre><code class="language-bash">hexo clean &amp;&amp; hexo g &amp;&amp; hexo s
</code></pre>
<pre><code>INFOStart processing
INFOHexo is running at http://localhost:4000/ . Press Ctrl+C to stop.
</code></pre>
<ul>
<li>访问 http://localhost:4000/ 即可查看本地部署效果</li>
</ul>
<p><strong>现在你已经完成本地部署了</strong></p>
<h3 id="部署至github-page">部署至github page</h3>
<ul>
<li>然后到 GitHub 创建一个和你用户名相同的仓库，后面加 <code>.github.io</code></li>
</ul>
<p>以我的 blog 为例，如下</p>
<p><img src="https://img2024.cnblogs.com/blog/3576666/202412/3576666-20241218013712287-1433206955.png"></p>
<ul>
<li>然后我们要实现免密登录，毕竟每次都输入密码也很麻烦</li>
</ul>
<pre><code class="language-bash">git config --global user.name "yourname"
git config --global user.email "youremail"
</code></pre>
<p>你也可以检查一下</p>
<pre><code class="language-bash">git config user.name
git config user.email
</code></pre>
<ul>
<li>然后 <code>Win + R</code> 打开 cmd，然后执行</li>
</ul>
<pre><code class="language-bash">ssh-keygen -t rsa -C yourEmail
</code></pre>
<p>例如</p>
<pre><code class="language-bash">ssh-keygen -t rsa -C simazhangyu@gmail.com
</code></pre>
<ul>
<li>然后你会发现 <code>c:\user\yourName</code> 下有一个 <code>.ssh</code> 目录，如果没有，打开隐藏文件夹，如下图</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/3576666/202412/3576666-20241218013729175-592423937.png"></p>
<p><code>.ssh</code> 文件夹下有 <code>id_rsa</code> 和 <code>id_rsa.pub</code>，前一个是私钥，后一个是公钥</p>
<p><s>有兴趣的小伙伴可以了解一下 :ssh 公钥私钥原理</s> 推荐阅读：SSH 密钥原理详解</p>
<p>我们需要将 <code>id_rsa.pub</code> 内的内容复制下来，然后进入 GitHub，点击 <code>Settings</code>，进入 <code>SSH and GPG keys</code> 选项，点击 <code>New SSH key</code>，然后填写 <code>Title: Blog</code>，<code>Key:你刚刚复制的公钥</code></p>
<p><strong>到这里你已经完成了一大半啦</strong></p>
<ul>
<li>进行配置</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/3576666/202412/3576666-20241218013748831-1634429175.png"></p>
<p>点开这个 <code>_config.yml</code></p>
<p><img src="https://img2024.cnblogs.com/blog/3576666/202412/3576666-20241218013757326-1873581273.png"></p>
<p>对这个 <code>deploy</code> 进行修改</p>
<pre><code class="language-yml">deploy:
    type: git
    repo: git@github.com:你的github用户名/你的github用户名.github.io.git
    branch: main
</code></pre>
<p>确保 <code>deploy</code> 配置正确，可以参考Hexo 部署文档</p>
<p>至此你就完成了部署到 <code>github page</code> 的全部教程</p>
<ul>
<li>
<p><code>hexo clean &amp;&amp; hexo g &amp;&amp; hexo d</code> 解释</p>
<p><code>hexo clean</code> 清理缓存</p>
<p><code>hexo g</code> 生成文章</p>
<p><code>hexo d</code> 推送到远端</p>
</li>
</ul>
<p>使用 <code>hexo d</code> 推送试试吧，不出意外过一会你就可以访问 <code>https://你的仓库名</code> 来访问你的 blog 了，以我的 blog 为例，访问 <code>https://ivelisya.github.io</code> 即可</p>
<p><strong>现在你已经完成部署至 github page 上了</strong></p>
<h3 id="数据保存">数据保存</h3>
<p>数据无价，辛辛苦苦写的 blog 数据丢失可就不好了</p>
<p>所以我建议在 GitHub 上面再开一个仓库来存放 blog 的源码</p>
<p>我建议是把 <code>node_modules</code> 这个文件夹也上传到仓库的，反正也不大，要是使用其它设备就可以直接 <code>git clone</code> 然后编写博客了，而不需要重新下载 <code>hexo</code> 这一步骤将加快部署速度。</p>
<p>默认大家都会使用 <code>git</code>，所以仅提供部分代码</p>
<pre><code class="language-bash"># 强制添加 node_modules 文件夹
git add -f node_modules/
# 提交更改
git commit -m "Add node_modules directory"
# 推送到远程仓库
git push
</code></pre>
<h3 id="部署至远端服务器">部署至远端服务器</h3>
<p>部署在 GitHub Pages 上有一些小问题。比如由于中国的 gfw，GitHub 的访问经常会受到限制，导致国内的小伙伴有时无法顺畅访问。所以可以同步部署在远端服务器上。这样以后推送的时候就会同时推到 GitHub 和个人服务器上了。</p>
<h4 id="服务器设置">服务器设置</h4>
<hr>
<ul>
<li>
<p>登录服务器，然后安装 <code>git</code> 和 <code>nginx</code></p>
<p>我使用的是 <code>root</code> 账户</p>
<p>服务器系统为 <code>ubuntu</code>，<code>centos</code> 代码可能有所不同，请自行修改</p>
<pre><code class="language-bash">sudo apt update
sudo apt upgrade
sudo apt install git
sudo apt install nginx
</code></pre>
</li>
<li>
<p>创建一个 git 裸库</p>
<pre><code class="language-bash">cd ~
git init --bare blogit.git
</code></pre>
</li>
<li>
<p>使用 git hooks 进行自动化</p>
<pre><code class="language-bash">vim blogit.git/hooks/post-receive
</code></pre>
</li>
<li>
<p>填入以下代码</p>
<pre><code class="language-bash">#!/bin/sh
git --work-tree=/var/www/html --git-dir=/root/blogit.git checkout -f
</code></pre>
</li>
<li>
<p>授予可执行权限</p>
<pre><code>chmod +x /root/blogit.git/hooks/post-receive
</code></pre>
</li>
<li>
<p>实现免密登录</p>
<pre><code class="language-bash">cd .ssh/
vim authorized_keys
</code></pre>
<p>将 <code>id_rsa.pub</code> 的内容填入，<code>id_rsa.pub</code> 位于</p>
</li>
</ul>
<p><img src="https://img2024.cnblogs.com/blog/3576666/202412/3576666-20241218013811007-994346882.png"></p>
<pre><code>如果没有请 `Win + R` 打开 cmd，然后执行

```bash
ssh-keygen -t rsa -C yourEmail
```

例如

```bash
ssh-keygen -t rsa -C simazhangyu@gmail.com
```

详细步骤请参考上文

**这里有一个问题**

服务器可能没有开 ssh 公钥登录，所以你可能需要手动设置
</code></pre>
<h5 id="服务器设置---开启-ssh-公钥认证">服务器设置 - 开启 ssh 公钥认证</h5>
<p>编辑 <code>/etc/ssh/sshd_config</code> 文件</p>
<p><img src="https://img2024.cnblogs.com/blog/3576666/202412/3576666-20241218013819339-541420297.png"></p>
<p>如果这里是 <code>no</code>，或者被 <code>#</code> 注释掉了，取消注释，设置成如图所示那样</p>
<p>然后执行</p>
<pre><code class="language-bash">sudo systemctl restart ssh
</code></pre>
<h4 id="本地设置">本地设置</h4>
<p>修改配置文件，路径为</p>
<p><img src="https://img2024.cnblogs.com/blog/3576666/202412/3576666-20241218013953164-1711249730.png"></p>
<p>点开这个 <code>_config.yml</code></p>
<p><img src="https://img2024.cnblogs.com/blog/3576666/202412/3576666-20241218013958458-1203900143.png"></p>
<p>对这个 <code>deploy</code> 进行修改</p>
<pre><code class="language-yml">deploy:
    - type: git
      repo: https://github.com/Ivelisya/Ivelisya.github.io.git
      branch: main
    - type: git
      repo: root@yourServerIP:/root/blogit.git
      branch: master
</code></pre>
<p>确保两个 <code>deploy</code> 配置项都正确，可以参考Hexo 多部署配置</p>
<p><strong>到这里你就已经完成了所有教程了✨</strong></p>
<p>快使用 <code>hexo d</code> 推送试试吧！</p>
<h3 id="总结">总结</h3>
<p>如果你觉得本教程有用请给我评论一下吧！<s><strong>求求了</strong></s></p>
<p>如果你有任何问题，请给我留言，我会尽我所能提供帮助</p>
<p>我的 blog 网站 ivelisya's blog</p>
<p>这将是一个长期更新支持维护的 blog</p>
<p><strong>搭建博客容易，坚持写博客困难，希望各位小伙伴们不要三分钟热度，一定要坚持下去喔，对自己亲手搭建的网站负责嘛 自己已经搭建好 blog 的小伙伴可以给我留言，我可以将你的 blog 网站添加到友链&gt;ᴗ&lt;</strong></p><br><br>
来源：https://www.cnblogs.com/ivelisya/p/18613713

查看完整版本: 2024安装hexo和next并部署到github和服务器最新教程