GitHub Hexo 搭建个人博客

发表于 | 分类于 |

基于Mac系统,20分钟搭建一个优雅的个人博客，不用去GoDaddy买域名，不用买虚拟主机,也不要998，你需要的只是一个Github账号

环境配置

  • 安装Node.js
  • 下载Git
  • 安装Hexo 
    1
    cd Desktop/    #设置你的目标路径，之后所有的博客文件和配置都在这个路径目录下，我这里直接丢到了桌面

Hexo 初始化

1
2
3
4
5
6
$ npm install hexo-cli -g.  #有提示权限错误的在npm 前面加 sudo
$ hexo init blog     #blog 你的文件名,这里会需要一点时间
$ cd blog
$ npm install
$ hexo g # 或者hexo generate.   #生成静态文件
$ hexo s # 或者hexo server  #启动本地web服务，用于博客的预览

被墙的话,在后面添加

1
--registry=https://registry.npm.taobao.org

如果不出意外，现在打开 http://localhost:4000/ 应该是可以看到这样一个界面了

同步到Github

  • 登陆你的github账号

  • 安装git部署插件

1
sudo npm install hexo-deployer-git –save
  • 找到打开_config.yml文件，末尾处修改成
1
2
3
4
deploy:
type: git
repo: https://github.com/L-vinCent/L-vinCent.github.io.git
branch: master
  • 这里要注意的是，：后面都有一个空格，不能少，否则会报错
  • repo后面就是新建的仓库的地址，名字是固定的格式(你自己的用户名.github.io),比如我的是这样

    不然是连接不到github的

然后同步

1
hexo d

然后打开链接看能否看到修改后的界面 https://l-vincent.github.io/ (这里修改为你自己对应的链接)

域名绑定

如果想拥有个性点的域名，可以自己买一个，具体配置就不多说了

设置主题

到此为止一个博客基本搭建完毕，接下来就只要把界面变的更加简洁和优雅了。

这里推荐一个主题样式，用的人挺多，具体怎么用直接看使用文档，要添加什么功能文档都很详细

  • NexT主题 为例 (8000+ star) , 支持统计分析，分享，多款评论系统，想要的基本都在这
  • Next使用文档 , 小白文档，添加分类和标签等功能都足够详细，就不额外再贴过来了

添加文章阅读量

包括一些评论功能和阅读量的功能自己可以选择性的加上去(Next都有集成)
我用的是 不蒜子 在页脚显示访问量，差不多是这样

  • 打开/theme/next/layout/_partial/footer.swig文件，拷贝下面的代码至文件的开头 ,我一般用 Sublime 工具编辑类似文件
1
2
<script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js">
</script>
  • 显示统计标签
1
2
3
4
5
6
7
<span id="busuanzi_container_site_pv">
本站总访问量<span id="busuanzi_value_site_pv"></span>次.    
</span>
<span id="busuanzi_container_site_uv">
本站访客数<span id="busuanzi_value_site_uv"></span>人次
</span>

网站的浏览次数，即pv；网站的访客数为uv。pv的计算方式是，单个用户连续点击n篇文章，记录n次访问量；uv的计算方式是，单个用户连续点击n篇文章，只记录1次访客数

如果需要统计每篇文章的阅读量，可以用 leanCloud ,可以参考Hexo的NexT主题个性化：添加文章阅读量

上传文章

  • 新建文章
1
2
cd 你的博客文件目录
hexo new "文章名"

然后找到 source／_posts 里面应该会有一个 文章名.md 文件了， 用MacDown打开，就能愉快的写博客了

写完之后

1
hexo g
1
hexo d   #同步到github

然后进主页就可以看到自己新建的文章

文章内添加本地图片

1
2
3
![](图片链接)    #固定格式
比如我有一张 test.png,  首先将图片放到 source/images 里面 , 然后 里面(/images/test.png)就可以显示了，
这里如果图片过大的话可能会上传失败，在此之前可以先将图片压缩一下

欢迎转载，标明出处