Hexo加GitHub快速搭建博客步骤

2017-12-10 本文已影响0人庖丁不解

简介

Hexo：一个利用Node.js开发，支持Markdown的开源静态博客生成器。它能帮您把markdown的md文件转成漂亮的静态html文件。
GitHub Pages: GitHub推出的一个免费静态页面托管服务。它能让您把静态站点部署到GitHub上，并提供github.io的域名。

软件安装（Windows）

Node.js: Hexo依赖Node.js, 所以先安装它。安装地址。安装完后需确认一下，打开命令行，点击“开始”-->运行-->输入cmd-->回车。输入path回车，检查path变量是否包含nodejs路径，比如C:\Program Files\nodejs\。继续在命令行中输入node --version回车，检查安装的Nodejs版本。到此Nodejs安装完毕。
Git: 这个对IT人员来说应该很熟悉，之前没有接触过的道友，也没关系,先安装，后面详细讲使用，下载地址。
Hexo: 首先自己新建一个Hexo安装目录，比如在E盘新建一个Hexo目录，进入该目录E:\Hexo，右键选择Git Bash Here。

接下来我们访问Hexo官网, 在首页下方，我们可以找到安装步骤如下。

$ npm install hexo-cli -g
$ hexo init blog
$ cd blog
$ npm install
$ hexo server

然后在刚才右键打开的Git Bash中，一条一条输入上面指令即可。如果速度慢，可以挂个代理。好了，现在就能在本地看到自己的博客页面了，打开浏览器输入：http://localhost:4000/ 回车。

Hexo更换主题和设置

Hexo默认使用的是landscape主题,可以到Hexo官网的主题，选择喜欢的进行更换。这里以NexT为例,先Ctrl+C停止Hexo服务,然后在Git Bash中输入如下命令（注意当前bash目录为E:\Hexo\blog）：

$ git clone https://github.com/iissnan/hexo-theme-next themes/next

完成以后要修改两个配置文件:

站点配置(E:\Hexo\blog_config.yml):

theme: next # 修改为NexT主题

主题配置（E:\Hexo\blog\themes\next_config.yml）
可以参考下面博客常用功能设置的内容，或者访问NexT官网,根据实际需要进行配置。

站点部署

登录GitHub创建仓库

如果还没有GitHub的同学可以先申请,然后登录。比如你的git账号为tobiasahlin,新建名为tobiasahlin.github.io的仓库。踩坑提醒：仓库名必须严格按照上面格式，否则以后用浏览器访问tobiasahlin.github.io时，将是404错误。

把本地静态文件部署到GitHub

安装hexo-deployer-git插件，在Bash中输入：

$ npm install hexo-deployer-git --save

为GitHub添加SSH Key（SSH推送文件免密码登录）

$ ssh-keygen -t rsa -C "youremail@example.com"

然后一直回车即可，最后打开C:\Users\Administrator.ssh\id_rsa.pub文件，复制所有文件内容。登录GitHub，在settings-->SSH and GPG keys-->New SSH key,在title中给你的key取个名，在Key中，把刚才复制的文件内容拷贝过来，保存。

修改站点配置(E:\Hexo\blog_config.yml)
找到“deploy”字段，修改为

deploy:
  type: git
  repo: git@github.com:tobiasahlin/tobiasahlin.github.io.git
  branch: master

提交本地文件

hexo g # 提交文件前先生成一下静态文件
hexo d # 提交文件到GitHub仓库

浏览器中输入tobiasahlin.github.io，就能看到博客啦（可能要等10分钟，GitHub需要时间处理）

Hexo常用命令

hexo g # 等于hexo generate 每次有内容更新后，都要生成一下静态文件
hexo s # 等于hexo server 启动本地服务
hexo d # 等于hexo deploy提交文件到GitHub仓库
hexo clean # 删除db.json和public文件夹，之后hexo g可重新生成
hexo init [folder] # 新建一个网站。如果没有设置文件夹，默认在目前的文件夹建立网站。
hexo new [layout] <title> # 新建一篇文章。没有layout,将用默认设置

博客常用功能设置

打开主题配置（E:\Hexo\blog\themes\next_config.yml）

评论功能

找到

disqus:
  enable: false
  shortname:
  count: true

changyan: 
  enable: false
  appid:
  appkey:

同学可以自行选择disqus还是畅言，到他们官网注册以后可以把相关信息填入即可。

网站访问统计

找到"不蒜子统计",把enable改为true

busuanzi_count:
  # count values only if the other configs are false
  enable: true
  # custom uv span for the whole site
  site_uv: true
  site_uv_header: 本站访客数
  site_uv_footer: 人次
  # custom pv span for the whole site
  site_pv: true
  site_pv_header: 本站总访问量
  site_pv_footer: 次
  # custom pv span for one page only
  page_pv: true
  page_pv_header: 本文总阅读量
  page_pv_footer: 次

添加打赏功能

找到

# Reward
reward_comment: 多谢打赏
wechatpay: /images/wechatpay.jpg
alipay: /images/alipay.jpg
#bitcoin: /images/bitcoin.png

把开头注释号#去掉，填写微信和支付宝的二维码图片地址即可。

订阅微信公众号

找到

wechat_subscriber:
  enabled: true
  qcode: /uploads/wechat-qcode.jpg
  description: 欢迎您扫一扫上面的微信公众号，订阅我的博客！

把开头注释号#去掉,填写微信二维码图片地址即可。