简介
-
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: 欢迎您扫一扫上面的微信公众号,订阅我的博客!
把开头注释号#去掉,填写微信二维码图片地址即可。
网友评论