和大多数搭建个人博客的博主一样,我之所以搭建个人博客的主要原因也是因为不希望受制于各大内容分享平台,生怕有朝一日被安上一个“莫须有”的罪名,所有辛苦创作的内容都付之一炬。
最终,我还是选择了后者,主要原因有如下几点:
- 容易搭建
- 操作和管理简单
- 免费
- 界面美观
本文就详细的介绍一下通过Github Page结合hexo搭建一个完整的个人博客。
域名-GithubPage
注册Github Page的过程如下:
首先打开链接https://github.com/join?source=header-home,注册github账号,然后登录github。
点击右上角"+",选择New repository,填写Repository name,这个就是可以直接访问的域名,然后点击create repository即可。
hexo是一个轻量级的博客管理系统,这里要注意,hexo是一个管理系统,它负责新建、部署等博客管理工作。如果使用过git做版本控制的话应该很容易理解,它可以类比为git,可以通过一些命令生成静态网页、把静态网页推送到远程仓库。
由于hexo是基于node.js制作的一款博客管理工具,所以要按照hexo就需要事先安装node,http://nodejs.cn/download/
$ npm install -g hexo-cli安装hexo之后需要对hexo进行初始化,首先需要新建文件夹,进入到新建文件夹之后再进行初始化,
$ mkdir hexo$ cd hexo$ hexo init最后可以得到如下目录,
- 文章
- 关于
- 分类
- 标签
hexo使用
记住上述命令就可以进行日常的个人博客维护工作。
主题-Next
hexo默认的主题是landscape,我们可以修改为我们自己喜欢的主题,目前hexo有很多适配的主题,其中比较常用,也是本文推荐的就是Next主题。
克隆Next主题
这样在~/hexo/themes路径下就会有一个next文件夹。
克隆next主题之后需要修改博客根目录下_config.yml文件,找到theme字段修改成next即可,
# Extensions## Plugins: https://hexo.io/plugins/## Themes: https://hexo.io/themes/theme: nextnext主题包含多个样式,我们可以根据自己的喜好进行修改,修改样式的文件在~/hexo/themes路径下,名字同为_config.yml,需要注意,这和前面提到的不是同一个文件,前面的配置文件是博客管理系统hexo的配置文件,这里的是主题的配置文件。
# Schemes# scheme: Musescheme: Mist# scheme: Pisces# scheme: Gemini必备功能
可以看出,目前为止博客还比较“干净”,很多必要的功能都没有,例如菜单栏不完整,没有搜索框,此外,评论、阅读量、友情链接这些重要的功能都没有,下面就来一一介绍一下这些功能的配置过程。
菜单栏
其中about是关于,tags是标签,其他的站点之类的也可以根据自己的喜欢进行添加。
搜索框是一个博客必不可少的部分,当更新的文章数量逐渐增加之后,为了方便访问者阅读或快速定位目标文章,我们需要给它添加上一个搜索功能,hexo添加搜索框的方式如下,
然后,在站点配置文件添加下面内容,
search: path: ./public/search.xml field: post format: html limit: 10000修改后重新生成静态网页,预览一下即可,
访问量、阅读量
评论功能
由于评论内容需要耗费存储资源,因此需要首先注册LeanCloud获取存储引擎,然后复制appid、appkey,然后打开主题配置文件,
valine: enable: true appid: Ikslsdjflsjdnclskdfjlskdklalla # your leancloud application appid appkey: Kokkall09kkssmmcsslla # your leancloud application appkey notify: false # mail notifier , https://github.com/xCss/Valine/wiki verify: false # Verification code placeholder: 请在此输入您的留言 # comment box placeholder avatar: mm # gravatar style guest_info: nick,mail,link # custom comment header pageSize: 10 # pagination size分享功能
首先,修改主题配置文件,
# Baidu Share# Available value:# button | slide# Warning: Baidu Share does not support https.baidushare: type: button baidushare: true然后,为了解决百度分享不支持https的问题,需要进一步的修改,要先访问下方链接,
把static文件夹下载到themes\next\source目录下,
修改前:
.src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];RSS
首先,安装RSS订阅插件,
$ npm install hexo-generator-feed --save最后,修改主题配置文件,添加下面字段,
rss: /atom.xml在我们的博客中,有时需要添加直达github、知乎、E-mail等社交工具的链接,也需要一些链接到其他网站的友情链接,下面来介绍一下怎么添加社交、友情链接。
然后,搜索Blog rolls配置友情链接,
# Blog rollslinks_icon: linklinks_title: linkslinks_layout: block#links_layout: inlinelinks: Title: http://example.com/福利
我在公众号分享了Python、机器学习、计算机视觉、强化学习等领域相关的学习资源、电子文档。此外,还整理了一些高效的实用工具,如果需要可以关注公众号【平凡而诗意】,回复相应关键字获取~

