搭建个人博客网站教程-06:Hexo+GitHub Pages:搭建局部环境+运行验证


一、创建Hexo源码文件夹

在确保完成了Git、Node.js、Hexo等软件环境的安装之后,我们需要通过如下格式的指令来创建hexo源码文件夹,用于存放个人网站博客的所有源码文件:
hexo init <hexo源码文件夹>

这里为了和将来要部署到GitHub Pages上的站点GitHub仓库名保持一致,故我这里将<hexo源码文件夹>命名为<GitHub用户名.github.io>,我的GitHub用户名为Napoleon940911,所以我这边需要输入的完整指令为:
hexo init Napoleon940911.github.io

(这里的<hexo源码文件夹>大家其实可以自由命名,不一定非要按我这种命名方式)

我们需要在电脑上选择一个合适的位置,来创建这个hexo源码文件夹,大家根据自己的实际情况选择即可。这里我选择的是如下目录:

在如下目录中的空白处打开鼠标右键,选择“Git Bash Here”,输入如下指令并回车进行创建:
hexo init Napoleon940911.github.io
命令执行结束后,Git Bash窗口内容如下图所示:

表示hexo源码文件夹创建成功了。同时电脑上相应的目录下会多出一个刚刚新建的文件夹,如下图所示:

二、进入这个文件夹

创建hexo源码文件夹完成后,进入新建的这个文件夹后可以看到里面默认已经有如下一些文件和文件夹了:

同样,我们需要在Git Bash窗口中输入如下指令并回车进入到该目录下,才能进行后续操作:
cd <hexo源码文件夹>
cd Napoleon940911.github.io

三、安装项目所需的依赖项

进入hexo源码文件夹后,需要通过输入如下指令来安装项目所需的依赖项:
npm install

安装完成后,会得到如上图所示的内容。

四、安装一键部署插件

后面需要将我们的个人博客网站部署到诸如GitHub Pages这样的地方,必须安装hexo的部署插件hexo-deployer-git才可以实现。在Git Bash窗口中输入如下指令并回车:
npm install hexo-deployer-git –save

安装完成后,会得到如上图所示的内容。

五、运行验证

5.1 启动Hexo服务器

上面的步骤全部完成后,博客的局部环境就搭建完毕了。但是最终成功与否,还是需要来实际运行验证一下看看。
这里我们在Git Bash窗口中输入如下指令并回车:
hexo server -o

如果出现如下图所示的警告窗口,点击“允许访问”即可:

耐心地等待一会儿之后,我们会看到如下图所示的界面:

上图中主要说明了2点信息:

  • 我们的个人博客网站的允许地址为http://localhost:4000;
  • 如果我们要停止运行,按下Ctrl+C即可。

(如果出现类似上图中框出的Warning信息,忽略即可,不用关心)

与此同时,我们会看到电脑的默认浏览器会自动弹出一个网页,浏览器中的地址就是上面提示的http://localhost:4000,网页上运行的就是我们刚刚搭建的个人博客网站。详情如下图所示:

5.2 停止Hexo服务器

当我们在Git Bash窗口中按下Crtl+C后,将会让服务器停止运行。如下图所示:

得到一串类似“Have a nice day”的字符提示。

此时若是刷新刚刚的网页,自然也是显示不出来了。重新启动 Hexo 服务器之后,我们将又可以进入刚刚的网页了。


文章作者: 拿破仑940911
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 拿破仑940911 !
评论
  目录