原文链接,持续更新:https://blleng.cn/180809/
本文将带领大家利用Hexo框架和Github或Coding从零开始初步搭建起个人独立博客。
准备工作
为何Hexo?
我第一次尝试独立博客的搭建就是从了解到Hexo框架开始,后来又转到wordpress,再后来因为云主机和配套数据库过期,我穷,不想续费,就放弃了wordpress,回到Hexo。现在想了想,还是Hexo好啊,为什么呢?
官方回答:
- _超快速度
- Node.js带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
- _支持Markdown
- Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
- _一键部署
- 只需一条指令即可部署到 GitHub Pages, Heroku 或其他网站。
- _丰富的插件
- Hexo 拥有强大的插件系统,安装插件可以让 Hexo 支持 Jade, CoffeeScript。
我的回答:
- 个人认为Hexo的可定制化程度更高。
- 因为是静态博客(虽然没有了动态博客的优点),不需要数据库支持,节省了一笔钱。
- 以上都是废话,来看看真正的原因吧!
- 用Hexo框架才能更完美地装逼!
搭建环境
Hexo的官方文档里已经说得很清楚了,所以大家可以去看看官方文档。
在开始搭建之前,我们需要准备好如下几样东西:
- Node.js
- 下载地址: https://nodejs.org/en/download/
- Git
- 下载地址: https://git-scm.com/downloads
Windows用户就不用多说了,Linux用户和Mac用户如果不清楚如何安装的话,可以参考一下Hexo的官方文档: https://hexo.io/zh-cn/docs/#安装前提
在安装好Node.js和Git之后,我们开始Hexo的安装:
方法很简单,一条命令全局安装Hexo:
$ npm install -g hexo-cli
安装顺利完成。然后,对于Ubuntu用户,Hexo是放在Node.js安装目录的bin里的,所以还需要软链接(不一定,视具体情况而定):
$ sudo ln -s /home/###/data/application/node-v##-linux-x##/bin/hexo /usr/local/bin/hexo
###
是你的电脑用户名,node-v##-linux-x##
这里具体看你的Node.js版本
开始搭建
现在我们正式开始博客的搭建工作!
本地搭建
初始化
首先,你需要建立一个文件夹,建在哪里,名字叫什么随便你,这个文件夹将是我们的大本营。
进入这个文件夹,在终端里(Windows用户右键打开Git Bash)依次执行如下命令,开始Hexo的初始化:
$ hexo init
$ npm install
完成初始化后你的文件夹内的主要结构将是这样的:
.
|--- _config.yml //它是站点配置文件
|--- package.json //应用程序信息,一般 用不上
|--- scaffolds //模板文件夹,新建文章时,将根据它建立文件
|--- source //存放用户资源,除_posts外,所有以_开头的文件(夹)、隐藏文件将被忽略,Markdown、html文件将被渲染并存至public文件夹,其他文件也会被拷贝过去
| |--- _drafts
| |--- _posts
|
|--- themes //主题文件夹,将根据主题来生成静态页面
上述操作完成后,大家可以尝试依次运行如下命令,在本地查看博客情况:
$ hexo g //相当于 hexo generate 生成静态页面
$ hexo s //相当于 hexo server 在本地服务器运行
如果一切正常,你将看到如下提示信息:
$ Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.
然后你就可以打开浏览器,访问http://localhost:4000/
,你将看到:
这就是我们的博客啦,接下来你可以更改站点配置文件来初步设置你的博客信息,如博客名称(title)、作者(author)等。因为可能会更换主题的缘故,暂时不对主题配置文件进行修改。
主题配置
我们此时所使用的是默认安装的landscape主题,如果不喜欢这个主题,可以更换。
Hexo的主题安装也很简单,只需将主题文件拷贝到themes
目录下即可,大家可以去Hexo的官网看看有哪些主题。
我在这里推荐两个主题:
- NexT
- 最受欢迎的主题之一,以
精于心,简于形
为理念,目前正在很稳定地更新,我用的是NexT的7.0.1
版本。这是一款非常完备的主题。 - 效果可以参考我的博客(虽然经过了我的小规模改造…)
- NexT使用文档: https://theme-next.org/
- 最新版本Github地址: https://github.com/theme-next/hexo-theme-next
- yilia
- 最受欢迎的主题之二,比较漂亮的一款主题,以极佳的移动端体验和加载速度著称,我曾经也用过。作者是腾讯大佬。
- 效果可以参考作者的博客: http://litten.me/
- Github地址: https://github.com/litten/hexo-theme-yilia
另外,知乎上有不少朋友的推荐: https://www.zhihu.com/question/24422335
我们这里以NexT为例:
在站点根目录下:
$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next
克隆好主题后,我们打开点配置文件,将themes
字段更改如下:
theme: next
然后运行hexo s
在本地查看效果。
大家在themes
目录下的next
目录中也能看见一个_config.yml
文件,它是主题配置文件,将帮助大家完成主题的配置。NexT主题是非常强大的,具体配置请大家查看next文档,百度一下也能找到很多关于next主题的文章,足以帮助大家完成主题配置,以后有时间我也会写一些关于next优化的文章。
文章
如果要新建文章或页面,可以执行以下命令:
$ hexo new "文章名字" //生成新文章,可以在_posts中看到。也可以直接在_posts里新建文本文档,后缀改成md就行...
$ hexo new page "页面名称" //生成新页面
到_posts
目录下,打开你新建的md文件,你就可以开始编辑了,一篇文章的结构一般是这样:
---
title: 文章名称
date: 建立日期
categories: 文章分类 //如有多个,格式为[分类1,分类2,分类3]
tags: 文章标签 //如有多个,格式同上
---
//以下是正文部分,支持Markdown格式
...
<!--more--> //如果有这个标签,后面的内容需点击“阅读全文”方可见.
...
Markdown的具体语法请自行查阅。
部署博客至Github和Coding
配置好主题后,我们就已经基本完成了博客的搭建工作,接下来我们要做的是将它部署至Github和Coding,然后大家就可以通过https://yourname.github.io
或https://yourname.coding.me
来访问自己的博客啦。
是部署到Github上还是Coding上随便大家啦,这里说这么几点:
- Github是最专业的!最专业的!最专业的!
- 但是github page是封禁了百度蜘蛛的,也就是说,部署到github的话,百度很难收录你的博客。
- 以上都不重要,重要的是,github是专业的!专业的!专业的!
- Coding是国内的网站
- Coding目前已被腾讯收购
- 我同时将博客部署到了github和coding,然后blleng.top域名的CNAME解析到了blleng.github.io,而blleng.top则解析到了blleng.coding.me。(也可以选择同一个域名CNAME解析国内线路到Coding,国外线路到GitHub)
注册Github和Coding
怎么注册我就不说了吧,唯一提醒一点,用户名请三思,以后博客的地址就是https://用户名.gihtub.io
或https://用户名.coding.me
。
{% note danger %}
然后,在Github上:
- 创建一个Repository
- 将它取名为
用户名.github.io
- 请勾选README//我的习惯,随便大家
如果要部署到Coding上:
- 新建一个项目
- 取名为
用户名.coding.me
- 也启用README
{% endnote %}
部署博客
接下来我们就要将博客部署到github或coding了。
我们先为Git设置一下username
和email
:
$ git config --global user.name "your_name"
$ git config --global user.email "your_email"
//用你的用户名代替your_name,电子邮箱地址代替your_email
接下来我们设置SSH Key避免麻烦的密码输入:
运行命令:
$ ssh-keygen -t rsa -C email_address
//用你的电子邮箱地址代替email_address
下面只需不断回车就好,成功之后,将在~/
文件夹下(windows用户具体为你的C盘用户文件夹下)生成一个.ssh
文件夹,进入这个文件夹,打开id_rsa.pub
文件,将里面的全部内容复制下来,它们长这样:
ssh-rsa ....一长串字符.....
添加 SSH Key:
github:
- 点击头像,进入
setting
,进入SSH and GPG keys
,点击New SSH key
,粘贴好你刚刚复制的内容,随便填个title,然后添加
coding:
- 点击头像,进入
我的账号
,进入SSH公钥
,粘贴,添加,完毕
添加SSH后效果如图:
可以验证一下SSH到底设置好没有:
github:
$ ssh -T git@github.com //可能会提示是否继续,输入yes然后回车
成功的话,结果是:
$ Hi blleng! You've successfully authenticated, but GitHub does not provide shell access.
coding:
$ ssh -T git@git.coding.net
结果:
$ Coding 提示: Hello blleng, You've connected to Coding.net via SSH. This is a personal key.
$ blleng,你好,你已经通过 SSH 协议认证 Coding.net 服务,这是一个个人公钥
部署之前,我们还需要一个插件的支持:
$ npm install hexo-deployer-git --save
然后更改站点配置文件,在最后面:
deploy:
type: git
repo:
github: git@github.com:你的用户名/你的用户名.github.io.git,master
coding: git@git.coding.net:你的用户名/你的用户名.coding.me.git,master
//如果只部署到github就把coding那一行删了就好
我们接下来可以开始部署,运行命令:
$ hexo clean && hexo d -g
//相当于依次运行 hexo clean(清除缓存文件和已生成静态文件,更改某个配置后却没有效果时可以用),hexo g,hexo d (hexo deploy)
命令运行完成且未报错的话,下面,我们就开始最后的检查工作:
- 到注册的仓库,检查生代码是否已上传到此处。
- 检查pages服务是否开启。
- github:
- 进入刚刚创建的仓库,进入
setting
,往下翻,找到GiHub Pages
一栏,看看source分支选的是不是master
,如果不是,就改成master。 - coding:
- 进入项目,点击
代码
,进入pages服务
,然后选master
分支,运行静态pages服务就好。
Pages开启后,效果如图:
检查之后,若无其它问题,我们就可以通过https://yourname.github.io
或https://yourname.coding.me
来访问你的博客了。
至此,博客的初步搭建工作就完成了。
本文永久链接,持续更新:https://blleng.cn/180809
终