记一次搭建个人博客---win10-githup-Hexo

见过别人高大上的博客，一直想拥有一个自己的可自定义的博客，刚好Hexo给了我这样的机会，经过了“千山万水”，终于把博客给建起来了。现在做一下总结吧。

工具： git for windows、Githup账号、node.js

一、环境准备

(1) 安装软件。

将git和node.js下载下来安装好，即安装Git、安装node.js。

(2) 注册Githup账号。

若没有Githup账号，则注册申请一个githup账号，若有了则可跳过这一步。

(3) 创建站点仓库。

登录githup账号，创建一个新的仓库，仓库名为你的githup用户名+.github.io，例如我的用户名是Emilygxy，则仓库名为Emilygxy.githup.io。其他的选项默认好了，最后确定Create repository。

(4) 配置SSH。

<1>开启bash。由于前面安装好Git了，所以在开始菜单里找到“Git”->“Git Bash”

<2>关联账号的本地和远程githup代码库。执行命令如下： git config --global user.username " Githup用户名 "、git config --global user.email " 邮箱 "

<3> 生成ssh key。执行命令行看是否现有SSH Key：cd~/ .ssh，若没有，则执行命令行生成ssh key：ssh-keygen -t rsa -C 。接着回车，按照指示来做，最终生成SSH Key。此时，在用户文件夹（如：C:\Users\lenovo\）下就会有一个新的文件夹.ssh，里面有刚刚创建的ssh密钥文件id_rsa和id_rsa.pub。

<4> 将SSH Key添加到githup上。打开id_rsa.pub文件，并复制里面的SSH Key，去往githup的个人主页，点击头像，Settings->SSH and GPG keys->New SSH key，将id_rsa.pub中的内容复制到Key文本框中，然后点击Add SSH key按钮。

<5> 测试git是否与github连接。回到Gitbash，执行命令行：ssh -T git@github.com，显示如下即为成功了。

二、安装Hexo

(1) 创建站点文件夹，并打开git bash。

在自己电脑盘根目录下新建文件夹 Hexo，按住点击鼠标右键git bash here。注：我这里直接用了我的仓库名Emilygxy.github.io。

(2) 安装Hexo。

目前国内npm源有问题，如果是win10系统（我的就是），则执行命令如下：

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

$ cnpm install hexo-cli -g

否则的话，则执行如下命令即可：

$ npm install -g hexo-cli

然后等待安装完毕。

(3) 查看版本。

安装成功后，查看版本信息：$ hexo -v

(4) 初始化Hexo。

初始化Hexo：$ hexo init

(5) 安装依赖包。

安装依赖包：$ npm install

前面几步完成之后的文件夹如下：

(6) 本地测试。

启动hexo，本地查看。

<1> 执行命令行：$ hexo server($ hexo s)

<2> 浏览器输入：localhost:4000

即可看到效果如下：

三、发布到Githup

(1) 复制SSH类型地址。

登录Github打开自己的项目 username.github.io、打开之后，点击SSH，选择SSH类型地址，并复制地址：

(2) 找到并打开站点配置文件文件。

打开你一开始创建的Hexo文件夹（如G:\Emilygxy.github.io），用编辑器打开刚文件夹下的_config.yml文件

(3) 修改配置文件。

在配置文件里作如下修改，保存。

(4) 执行发布相关的命令。

依次执行如下命令：

$ hexo clean (清除缓存)

$ hexo generate(hexo g生成，每次修改本地文件后，需要才能保存)

$ hexo server($ hexo s启动服务预览)

$ hexo deploy($ hexo d部署)

若发布成功了，则gitbash显示：

注：(1) 执行第三条命令后，可刷新浏览器：localhost:4000 查看。(2) 执行第四条命令时，若出现如下错误：

，则执行命令行：$ npm install hexo-deployer-git --save；若还是不能解决，则先删除Hexo文件下的.deploy_git文件夹(如果没有这个文件夹，就忽略它)，然后执行：$ git config --global core.autocrlf false，然后重新执行上面四条命令即可。(3) 每次文件有修改，都要相应执行这四条命令。

(5) 测试网站。

 https://username .github.io/就是你的专属博客网址了。打开网址https://username.githup.io/进行验证是否成功，我的是https://Emilygxy.github.io/

四、自定义博客UI

(1) 进入主题官网，选择主题下载。

<1> 进入Hexo的官网主题专栏。

<2> 选择喜欢的主题点击进去，然后进入到它的github地址，我们只要把这个地址复制下来(例如我是选择：hexo-theme-antiquity这个主题)

<3> 再打开Hexo文件夹下的themes目录（G:\Emilygxy.github.io\themes），右键Git Bash，在命令行输入:

git clone https://github.com/yiluyanxia/hexo-theme-antiquity.git(此处地址替换成你需要使用的主题的地址) ，等待下载完成。

(2) 修改配置文件

  下载完成后，打开Hexo文件夹下的站点配置文件_config.yml

修改参数为：theme: hexo-theme-antiquity

(3) 部署主题，本地查看效果，然后发布到githup上。

<1> 本地查看主题。在Hexo目录下，git bash执行命令：

$ hexo clean (清除缓存)

$ hexo generate(hexo g生成，每次修改本地文件后，需要才能保存)

$ hexo server($ hexo s启动服务预览)

刷新浏览器查看效果：

 

<2> 将主题发布到githup上。

$ hexo deploy($ hexo d部署)

站点测试效果：

五、写文章并发布

(1) 编写创建文章。

使用命令：$ hexo new "我的家乡"

其中“我的家乡”为文章标题，执行命令 hexo n "我的家乡" 后，gitbash给出反馈，还会在项目 \Hexo\source_posts 中生成 我的家乡.md文件，用编辑器打开编写即可。当然，也可以直接在\Hexo\source\posts中新建一个md文件。

(2) 发布文章到githup上。

写完后，推送到服务器上，执行以下命令即可在我们的站点看到新的文章。

$ hexo clean (清除缓存)

$ hexo generate(hexo g生成，每次修改本地文件后，需要才能保存)

$ hexo server($ hexo s启动服务预览)

$ hexo deploy($ hexo d部署)

测试效果：

注：有时候执行一次命令：$ hexo deploy($ hexo d部署)，没能成功部署，多试几次就可以了。

五、一些问题

(1) 为什么hexo博客更新不了？

在本地新建了文章文档之后，想将其发布到网站上去，结果一直看不到网页的更新，还爆出了这样的错误：

ERROR Process failed: about/index.md

TypeError: Cannot read property 'utcOffset' of null

网上找了很多资料，终于在一篇帖子上看到了相似的问题，参考它的解决方法，解决了我自己的问题。

解决方法：原来站点的配置文件_config.yml的timezone也就是时区必须要和主题的的配置文件_config.yml一致，把这两个文件下的timezone都设为Asia/Shanghai，或者都不设置时区，就解决了。

六、参考博文

https://zhuanlan.zhihu.com/p/38122668

https://juejin.im/entry/5a574864f265da3e3c6c1217