整理下github+hexo静态博客的配置过程

花了大概半个下午的时间把github+hexo静态博客搭建好了,难度并不大,这里记录一下。

如果有需要的朋友仅供参考,因为hexo本身一直在更新,所以安装过程中难免有坑,有问题最好google。

配置环境win7(64bit).

准备:

需要准备好以下软件:
#Node.js环境
#Git

置Node.js环境

下载Node.js:安装连接
一路yes安装完成后,测试是否安装成功:

cmd中输入下面两个命令查看版本确认安装状态,

node -v
npm -v

如果结果如下图所示,则说明安装正确,可以进行下一步了,如果不正确,则需要回头检查自己的安装过程。

Node.js安装测试


配置Git

一路next安装后依旧检查安装情况:
git --version

如果结果如下图所示,则说明安装正确,可以进行下一步了,如果不正确,则需要回头检查自己的安装过程。

Git安装测试

Github是必须要有账号的,没有的需要注册一个。

在github中,点击页面右上角的加号,选择New repository;

Repository name下填写yourname.github.ioDescription (optional)下填写一些简单的描述(不写也没有关系),如图所示:

代码库设置


github会自动开启gitpage功能。

配置Hexo

安装Hexo

在自己认为合适的地方创建一个文件夹,然后在文件夹空白处按住Shift+鼠标右键,然后点击在此处打开命令行窗口。(同样要记住啦,下文中会使用在当前目录打开命令行来代指上述的操作)

在命令行中输入:

npm install hexo-cli -g

然后你将会看到:

安装hexo-cli

可能你会看到一个WARN,但是不用担心,这不会影响你的正常使用。 然后输入

npm install hexo --save

然后你会看到命令行窗口刷了一大堆白字,下面我们来看一看Hexo是不是已经安装好了。 在命令行中输入:

hexo -v

如果你看到了如图文字,则说明已经安装成功了。

Hexo测试

初始化Hexo

接着上面的操作,输入:

hexo init

如图:

hexo初始化

然后输入:

npm install

之后npm将会自动安装你需要的组件,只需要等待npm操作即可。

首次体验Hexo

继续操作,同样是在命令行中,输入:

hexo g

如图:

hexo渲染

然后输入:

hexo s

然后会提示:

INFO  Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

在浏览器中打开http://localhost:4000/,你将会看到:

hexo初体验

到目前为止,Hexo在本地的配置已经全都结束了。需要注意的是,有可能在本地配置时存在端口被占用的情况,查官方文档修改一下本地端口号即可。

建站

Hexo安装好了之后,就开始进行建站。打开终端cd到桌面并使用如下命令即可建好

hexo init yourname
cd yourname
npm install

其中yourname是你的文件夹名字可随意取(本文章假设yourname的文件夹名称是Hexo)。
建站好了之后需要了解更多的信息和其他步骤请参考官网的这篇文档。https://hexo.io/zh-cn/docs/setup.html

这里需要特别提一下,官方的文档里并没讲解如何配置与Github pages进行关联,在此特意说一下配置信息。进入到你的站点(使用hexo init yourname命令时,这里的yourname文件夹目录,刚假设yourname是Hexo,所以我们进入Hexo目录),然后以文本编辑器打开_config.yml文件,并滚动到最下面添加如下配置信息(注意最下边有deploytype字段,覆盖这两个字段或者删除这两个字段然后复制下面的四个字段也行。):

deploy:
  type: git
repositoryhttps://github.com/biggercoffee/biggercoffee.github.io.git
  branch: master

把其中repository字段的值替换成你的github pages提交代码的git地址。其中注意deploy下面的每一行开头有两个空格,冒号后有一个空格。

把其中repository字段的值替换成你的github pages提交代码的git地址。

发布

当然这只是本地跑起来了,而你的github pages服务器上并没有,所以你就需要在你的站点里使用终端命令进行发布:

hexo clean
hexo g
hexo d

命令详解,第一条是清楚缓存,第二条命令是生成本地发布文件夹,第三条命令才是最后的发布到github pages上。更多的hexo命令操作请参考官方文档即可。不过一般用来用去无非就是创建页面、发布这么几条命令而已。

参考连接:1. 我的博客是如何搭建的(github pages + HEXO + 域名绑定)

2. 史上最详细的Hexo博客搭建图文教程



评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值