GitHub搭建属于自己的博客,一方面博客主题可以随心所欲(即便不是自己开发,也可选择套用一些比较优美的基础库),另一方面没有各种广告的入侵。同时在本地维护,完全由自己掌控。
主要用到三个平台:
- Hexo是本地框架,其实还应该加上Markdown,用来写文章;
- GitHub主要是提供博客发布中转,就是免费给你一个域名,本地的文章提交到GitHub后他人可以通过网络访问;
- 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。常见错误:
- 属性值的最前面应该有一个空格,例如: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)在文章底部增加版权信息