Fork me on GitHub

GitHub+hexo+next搭建博客

GitHub搭建属于自己的博客,一方面博客主题可以随心所欲(即便不是自己开发,也可选择套用一些比较优美的基础库),另一方面没有各种广告的入侵。同时在本地维护,完全由自己掌控。
主要用到三个平台:

  1. Hexo是本地框架,其实还应该加上Markdown,用来写文章;
  2. GitHub主要是提供博客发布中转,就是免费给你一个域名,本地的文章提交到GitHub后他人可以通过网络访问;
  3. Next是一个比较好的主题,就好像你的手机换主题一样,根据你的喜好给博客换不同的着装。

在使用Hexo之前要配置好本地环境,这是本文的第一步;然后安装Hexo,成功以后就可以在本地访问你的第一个原始博客了;然后需要将本地博客发到GitHub上去,这是本文的第三步;最后是Next的使用,有些没介绍是因为给的链接介绍的很详细不再赘述。


1、搭建环境准备

* node.js的安装(简单)
* git的安装(简单)
* gitHub账户的配置(最终要得到一个GitHub的可访问网址,就是一个仓库repo)

对于上面这三个步骤网上有很多教程,对照教程就可以。

2、安装Hexo

* 新建文件夹Hexo》blog;打开cmd面板,定位到空文件夹Hexo》blog
* 输入:npm install hexo -g     //-g表示全局安装,npm默认为当前项目安装,这个安装是默认装到C盘指定位置
* 输入:hexo init               //初始化,其实就是把安装文件复制到blog里面
* 输入:hexo generate           //自动根据当前目录下文件生成静态网页
* 输入:npm install hexo-server --save            //安装hexo-server插件
* 输入:hexo server             //启动hexo
* 在网页端地址栏输入:http://localhost:4000/,就可以看到新建的hello world博客。

3、将Hexo与github page 联系起来

(1)配置git个人信息`

    * 在桌面鼠标右键,点击Git Bash Here
    * 输入:git config --global user.name "GitHub的注册用户名"
    * 输入:git config --global user.email "GitHub注册邮箱"
    * 输入:ssh-keygen -t rsa -C "GitHub注册邮箱",设置文件放的位置,保存生成的密匙(id_rsa,id_rsa.pub)
    * 然后进入GitHub账户,点击右上方头像旁边的向下三角箭头,选择Settings,进去后选择SSH and GPG keys,新建SSH key;自己给key起一个名字,然后将上一步生成的id_rsa.pub中的内容拷贝到key对话框,保存。
    * 测试》仍然在刚才的GitBash中输入:ssh -T git@github.com,如果有提示输入(yes/no?)就输入y,然后回车;
    * 出现“Hi (GitHub用户名)....”等字样就说明配置成功了。  

(2)配置deployment

    * 进入GitHub,点击第1步里面生成的那个仓库,找到右方中部“Clone or Doenload”,点击后会出现一个选择下拉框,把他变成“Clone with SSH”,然后复制下面地址栏的内容(git@github.com:dagongji10/dagongji10.github.io.git)
    * 找到Hexo》blog里面的配置文件_config.yml,打开,修改以下内容:
         deploy:
             type: git
             repo: git@github.com:dagongji10/dagongji10.github.io.git     //这就是本地文件和GitHub建立联系的地方
             branch: master   //千万要注意冒号后面有一个空格,一定不能省略
    * 保存之后回到Hexo》blog的GitBash,输入:hexo generate
    * 输入:hexo deploy(部署博客,需要等一会儿),看到Done:git的提示就好啦

(3)在浏览器地址栏输入https://(GitHub用户名).github.io/就可以访问了

4、写博客与博客发布

    * 进入本地博客目录,鼠标右键》Git Bash Here            //进入hexo环境
    * hexo clean                                    //清除本地缓存
    * hexo generate                                    //生成个人博客所需的静态页面
    * hexo new "名称"                                //新建博客
    * 然后进入博客目录,找到 ..\source\_posts 路径        //这里就是博客的本地文件
    * 用Markdown来修改博客
    * hexo deploy                                    //发布本地博客

注意博客的.md文件(本地)的格式,文件头的属性和属性值,这涉及到Markdown语法,如果格式错误,可能导致博客无法发布到GitHub。常见错误:

  1. 属性值的最前面应该有一个空格,例如:copyright: false,false前面是有空格的;

5、布置自己的blog(参考
(1)在右上角或左上角实现fork me on GitHub:

    * 进入网址:https://github.com/blog/273-github-ribbons,选择喜欢的风格,复制代码;
    * 打开文件:themes/next/layout/_layout.swig,把刚才复制的代码放在<div class="headband"></div>的下面,并把href改为你的github地址

(2)添加RSS

    * 进入站点配置文件,找到Plugins,去掉前面的#,在后面添加hexo-generate-feed(plugins: hexo-generate-feed)
    * 进入主题配置文件,找到rss,在后面添加/atom.xml(rss: /atom.xml)

(3)修改文章底部带“#”的标签

    * 修改模板/themes/next/layout/_macro/post.swig,搜索 rel="tag">#,将 # 换成 <i class="fa fa-tag"></i>

(4)在文章末尾添加“本文结束”标记
(5)博文压缩
(6)在网站底部加上访客数量
(8)在线搜索:next官网》第三方服务有相关教程
(9)评论(来必力)

    * 来必力官网注册,点击网站右上角找到管理页面,在弹出的页面添加自己的网站地址,名字,之后复制代码里面data-uid后面的内容(带引号);
    * 进入主题配置文件,修改livere_uid后面的值为上一步复制的代码,保存即可。

(10)在文章底部增加版权信息

-------------本文结束感谢您的阅读-------------
ChengQian wechat
有问题可以通过微信一起讨论!