博客搭建教程(持续更新)

喜欢写Blog的人，都会经历三个阶段：     第一阶段，刚接触Blog，觉得很新鲜，试着选择一个免费空间来写。第二阶段，发现免费空间限制太多，就自己购买域名和空间，搭建独立博客。第三阶段，觉得独立博客的管理太麻烦，最好在保留控制权的前提下，让别人来管，自己只负责写文章。

摘自：阮一峰–搭建一个免费的，无限流量的Blog—-github Pages和Jekyll入门

准备工作

安装Node.js

下载地址：http://nodejs.cn/

安装Git

下载地址：http://git-scm.com/download/

安装Hexo

 mkdir hexo 建立hexo文件夹 cd d:/hexo 进入hexo文件夹 npm install hexo-cli -g 安装hexo hexo init Hexo 初始化 cd Hexo npm install hexo g # 或者hexo generate hexo s # 或者hexo server，可以在http://localhost:4000/ 查看

Hexo常用的几个命令：

 hexo generate (hexo g) 生成静态文件，会在当前目录下生成一个新的叫做public的文件夹 hexo server (hexo s) 启动本地web服务，用于博客的预览 hexo deploy (hexo d) 部署播客到远端（比如github, heroku等平台） hexo new “postName” #新建文章 hexo new page “pageName” #新建页面

简写

 hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy hexo d -g #生成部署 hexo s -g #生成预览

现在我们打开http://localhost:4000/ 已经可以看到一篇内置的blog了。

部署Hexo到github

注册Github账户

首先，你得注册一个github账户。

github：https://github.com/

配置SSH keys

检查SSH keys的设置

从开始菜单中找到 Git Bash,键入

$ cd ~/. ssh  

检查本机的ssh密钥

生成新的SSH keys

$ ssh-keygen -t rsa -C "你的邮箱地址"Generating public/private rsa key pair.Enter file in which to save the key (/Users/your_user_directory/.ssh/id_rsa):<回车>

系统会在你本机创建一个文件夹，存放key的相关文件，并要求你输入github密码。

添加SSH Key到GitHub

• 1、找到刚刚生成的文件

• 2、打开github，找到setting下的SSH and GPG keys(图1)

• 3、将id_rsa.pub用Notepad++打开，将里面的内容粘贴到(图2)中

测试是否添加成功

在Git Bash中键入$ ssh -T [e-mail]

出现提示直接yes，然后键入密码

至此，我们已经成功连接到Github上。

设置用户信息

$ git config –global user.name “username”//用户名

$ git config –global user.email “[e-mail]”//填写自己的邮箱

完成！

使用hexo deploy部署到GitHub

打开Hexo文件夹下的_config.yml文件，找到如下代码：(注意：冒号后面要加上一个空格，否则会报错。)

deploy:  type: git  repository: https://github.com/username/username.github.io.git  branch: master

依次输入如下命令：

hexo cleanhexo ghexo d

若出现以下提示则表明正确：

此时，打开https://t822876884.github.io/就能看到个人博客部署成功啦！

Hexo主题设置克隆

这里以主题yilia为例进行说明。

安装主题

  hexo clean  git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

启用主题

修改Hexo根目录下的_config.yml配置文件中的theme属性，使用Notepad++打开，找到theme并将其设置为yilia。

更新主题

  cd themes/yilia  git pull  cd Hexo  hexo g # 生成  hexo s # 启动本地web服务器

现在打开http://localhost:4000/ ，会看到我们已经应用了一个新的主题。

Hexo 主题配置说明

　每个不同的主题会需要不同的配置，主题配置文件在主题目录下的_config.yml。
以我们使用的yilia主题为例，其提供如下的配置项（theme\yilia_config.yml）：

＃Headermenu:主页: /所有文章: /archives＃ 随笔: /tags/随笔＃ SubNavsubnav:github: “#”weibo: “#”rss: “#”zhihu: “#”＃douban: “#”＃mail: “#”＃facebook: “#”＃google: “#”＃twitter: “#”＃linkedin: “#”rss: /atom.xml＃ Contentexcerpt_link: morefancybox: truemathjax: true＃ Miscellaneousgoogle_analytics: ‘’favicon: /favicon.png＃你的头像urlavatar: “”＃是否开启分享share: true＃是否开启多说评论，填写你在多说申请的项目名称duoshuo: duoshuo-key＃若使用disqus，请在博客config文件中填写disqus_shortname，并关闭多说评论duoshuo: wtyx＃是否开启云标签tagcloud: true＃是否开启友情链接＃不开启——＃friends: false＃是否开启“关于我”。＃不开启——＃aboutme: false＃开启——aboutme: 我是谁，我从哪里来，我到哪里去？我就是我，是颜色不一样的吃货…

添加sitemap和feed插件

• $ npm install hexo-generator-feed
• $ npm install hexo-generator-sitemap

修改_config.yml

＃ ExtensionsPlugins:hexo-generator-feedhexo-generator-sitemap＃Feed Atomfeed:type: atompath: atom.xmllimit: 20＃sitemapsitemap:path: sitemap.xml

添加Fork me on Github

到这里选择你喜欢的代码，添加到hexo/themes/yilia/layout/layout.ejs的div中即可，注意要将代码里的you改成你的Github账号名。

<a href="https://github.com/you"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/121cd7cbdc3e4855075ea8b558508b91ac463ac2/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f677265656e5f3030373230302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_green_007200.png"></a>

再次运行

git pull(更新主题)

添加404公益页面

GitHub Pages有提供制作404页面的指引： Custom 404 Pages。

　　直接在根目录下创建自己的404.html或者404.md就可以。但是自定义404页面仅对绑定顶级域名的项目才起作用，GitHub默认分配的二级域名是不起作用的，使用hexo server在本机调试也是不起作用的。
推荐使用腾讯公益404。

添加about页面

hexo new page “about”

之后在\source\about\index.md目录下会生成一个index.md文件，打开输入个人信息即可。

使用不蒜子添加访客统计

详情参考http://ibruce.info/，具体做法很简单，就是在你的themes/your themes/layout/_partial/footer.ejs底部加入这段脚本

<script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>

然后在<p class="copyright"></p>中间添加如下统计信息即可

本站总访问量 <span id="busuanzi_value_site_pv"></span> 次, 访客数 <span id="busuanzi_value_site_uv"></span> 人次, 本文总阅读量 <span id="busuanzi_value_page_pv"></span> 次

注：不蒜子官方网站http://service.ibruce.info/

部分参考博文：

如何搭建一个独立博客——简明Github Pages与Hexo教程

手把手教你使用Hexo + Github Pages搭建个人独立博客