Hexo与GitHub博客搭建

Hexo & Github博客搭建教程

关键词

• Hexo
• 静态博客
• Github pages
• hexo theme（主题）

步骤

1.安装Node.js

下载地址->node.js

安装完成后，按win+R打开命令符，输入node -v和npm -v，如果能出现版本号，就说明你安装成功啦。

2.Git与GitHub

Git->下载地址

安装完成后，按win+R打开命令符，输入git –version，如果能出现版本号，就说明你安装成功啦。

下载完Git，你当然还需要一个GitHub账号（记得去注册哟），用来存放网站.

···Github新建博客仓库··· --------------------------------------------------

注意：仓库名必须是GitHub的用户名+github.io！！！

···Github Pages··· --------------------------------------------------

项目建成后，点击Settings，向下拉到最后有个GitHub Pages，

注意：是新建项目的settings哦!

点击Choose a theme选择一个你喜欢的主题，再回到GitHub Pages。点击链接就可以看到你刚才选择的那个主题啦。

3.安装Hexo

在电脑合适的位置新建一个文件夹存放网站，本文中将其取名为blog
在文件夹根目录下右键，找到git bash here,依次输入如下指令

npm i hexo-cli -g #-g表示全局安装

hexo -v #验证是否安装成功

hexo -init #初始化

hexo install #安装依赖包

npm install #安装所需组件

hexo generate #生成静态网页

hexo server #在本地服务器运行

你也可以通过命令hexo s -p xxxx #把默认端口号修改

执行完最后一步，会返回一个网址（默认端口号是4000），用浏览器打开，如果出现下图的页面，就说明你成功了一半，如果你不喜欢这个主题，后面part将会讲到如何更换主题↓↓↓

（如果执行完上面的命令，没有返回网址，出现下面的情况，你可以回到你的blog文件下，查看有没有下面这些文件，如果没有说明你前面执行命令的过程中出现了差错，重新初始化将上面那些命令重新执行一遍即可。）

详情可查看next文档！！!

本地搭建好后，下面我们需要

···Github与本地连接··· --------------------------------------------------

右键打开git bash，然后输入下面命令

git config --global user.name "zhaojiaj" “ “内的账号为刚才GitHub注册的帐号名字

git config --global user.email "1165465022@qq.com" “ “内的邮箱为刚才GitHub注册的帐号邮箱

···生成密钥SSH key设置到Github··· --------------------------------------------------

同样，还是右键git bash here,输入下列命令：

cd ~/.ssh

ssh-keygen -t rsa -C "1165465022@qq.com"

连续三个回车，你会得到以下三个文件

找到文件夹C:\Users\lenvo.ssh(地址可能有所不同)生成的文件，用记事本打开***.pub的文件，复制内容到GitHub->settings->ssh and gpg key->new ssh sky中（记得要新建一个ssh key哦，名字可以随便起）

如下就是成功了！

···本地配置··· --------------------------------------------------

找到blog文件夹下_config.yml，用sublime打开(记事本也可)

按照如下修改，repository修改为你自己的github项目地址

记住repository冒号后面要有个空格，不然会报错！！！

···用Git上传··· --------------------------------------------------

根目录下输入右击git bash here

hexo g生成静态网页

hexo s预览本地效果

hexo d上传到github上

或者直接输入hexo g -d作用就是部署、上传,一键操作。

注：这几个命令是常用命令，以后写完博客或者更新配置后都会用到

配好后，如果出现让你登陆的页面，就说明配置成功啦！

这时打开你的 ****.github.io主页就能看到前面提到的hexo默认的主题啦

···上传文章··· --------------------------------------------------

在根目录blog文件夹下右击git bash here

hexo new "文件名"

在_posts中会有新建的文章，用markdownpad2打开编辑即可。(一般默认自动新建文章名字为hello-world.md）

左边编辑文章内容，右边可以同步展示效果。

如果第一次下载使用markdownpad2打开md文件时可能报错，那是HTML渲染错误。

因为缺少了组件，安装Awesomium 1.6.6 SDK即可

http://markdownpad.com/download/awesomium_v1.6.6_sdk_win.exe

文章编辑好后，再次回到根目录下git bash here

hexo g -d #部署上传 再次打开主页就可以看到你写的文章啦

4.Hexo theme

官网有许多主题的源码你可以下载到自己的电脑上，下载地址->hexo主题

下面就介绍一下切换主题的方法：

首先从上面的链接进入hexo theme主页

然后选择一套你喜欢的主题进入作者主题的GitHub仓库，下载主题的压缩包

把下载的到本地的压缩包解压，可以把解压文件夹的名字改成简短的，复制粘贴到blog/themes下

接下来一步修改配置，_config.yml文件下拉到最底下，把theme后主题的名字改成你刚才clone到blog/themes中主题的名字

最后，hexo g -d #部署上传

主题就修改成功啦！

但是，如果你有强大的前端基础或者对前端感兴趣，也可以尝试自己写一个主题，参考->hexo模板