Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,并在几秒内即可利用靓丽的主题生成静态网页。
一、安装Hexo
安装Hexo
前需要提前安装:
如果您的电脑中已经安装上述必备程序,那么恭喜您!接下来只需要使用 npm
即可完成 Hexo
的安装。
$ npm install -g hexo-cli
注意:这是一个全局安装,可能你以为我说这句话是多余的,但是下面我们要安装的基本上是局部安装,因此当你重新Down下来源码后是需要再次安装的,在这里提前进行说明。
我们可以使用npm list -g --depth 0
命令来查看你的全局安装文件:
C:\Users\Administrator>npm list -g --depth 0
C:\Users\Administrator\AppData\Roaming\npm
`-- hexo-cli@1.0.4
二、创建仓库及管理配置
搭建博客的前提:
- 拥有一个
GitHub
账号 Git
正确配置
如果没有GitHub
账号,需要先注册一个GitHub
账号,然后在客户端上安装Git
。
2.1 Git基本配置
git config --global user.name "fxb577328725" // 你的github用户名,而非昵称
git config --global user.email "577328725@qq.com" // 填写你注册github的邮箱
说明:以上两个配置是Git
针对全局的配置。
2.2 创建仓库
我们需要在GitHub
创建一个名为 username.github.io
的仓库。
注意: 如果你的 github
用户名是 test
,那么你就新建 test.github.io
的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 http://test.github.io
了,是不是很方便!
2.3 配置SSH key
为什么要配置这个呢? 因为你提交代码肯定要拥有你的github
权限才可以,但是直接使用用户名和密码太不安全了,因此我们使用 ssh key
来解决本地和服务器的连接问题。
首先检查检查本机是否已包含ssh
秘钥:
$ ssh -T git@github.com
注意:需要在Git Bash
中执行,如果你正常安装了Git
,那么鼠标右击即可看到Git Bash
!
如果显示类似下面信息表示配置成功:
$ ssh -T git@github.com
Hi fxb577328725【这是我的GitHub名称】! You've successfully authenticated, but GitHub does not provide shell access.
提示:其实有一个比较简洁的方法就是进入到当前系统账户的根目录查看是否包含一个.ssh
文件夹
如果没有提示successfully
也不存在.ssh
文件夹,那么就需要生成本地公钥私钥:
$ ssh-keygen -t rsa -C "GitHub注册邮箱"
然后连续3次回车,最终会在当前账户的根目录下生成一个.ssh
文件夹,找到 .ssh\id_rsa.pub
文件,使用记事本打开并复制里面的内容,然后打开你的github主页,进入 个人设置 → SSH and GPG keys → New SSH key ,将刚复制的内容粘贴到 key
那里,title
随意,最后保存即可。
测试配置是否成功:
$ ssh -T git@github.com # 注意邮箱地址不用改
如果提示 Are you sure you want to continue connecting (yes/no)?
,输入yes,然后会看到:
Hi 你的用户名! You’ve successfully authenticated, but GitHub does not provide shell access.
三、建站
Hexo
搭建博客的特点是博客源文件与部署文件是分离的,我们可以将生成的静态文件部署到任何地方,我们只是利用了GitHub Page来托管并解析我们的静态文件罢了!
其实比较合理的方法是我们在master
分支部署静态文件,然后在创建一个源文件分支来管理博客的源文件!但这需要一定的Git
与GitHub
的使用基础,对于还不太熟的朋友建议你们还是另外创建一个仓库来维护源文件比较稳妥,在这里我将采用两个仓库的方式实现,后期会对前面提及的方式进行说明!
另外在创建一个仓库然后克隆到本地,我的源码维护仓库是BlogSource
,当然我们可以不创建此仓库,其只是为了维护博客的源代码而已!
安装好 Hexo
并创建及配置好仓库后,执行下列命令,Hexo
将会在指定文件夹中下载搭建博客所需文件。
$ hexo init <folder>
$ cd <folder>
$ npm install
注意:如果没有指定文件夹,也就是仅执行 hexo init
命令,则会在当前目录下存储下载的文件;并且此命令要求对应目录下不能有文件,也就是说不能在你源代码维护仓库中执行,我们将生成的所有文档拷贝或剪切到你的源码维护仓库,此处我是拷贝到了BlogSource
文件夹下!
新建完成后,文件夹的目录结构如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
3.1 _config.yml
网站的 配置 信息,您可以在此配置大部分的参数。
3.2 package.json
应用程序的信息。EJS, Stylus 和 Markdown renderer【渲染器】 已默认安装,您可以自由移除。
{
"name": "hexo-site",
"version": "0.0.0",
"private": true,
"hexo": {
"version": "3.5.0"
},
"dependencies": {
"hexo": "^3.2.0",
"hexo-generator-archive": "^0.1.4",
"hexo-generator-category": "^0.1.3",
"hexo-generator-index": "^0.2.0",
"hexo-generator-tag": "^0.2.0",
"hexo-renderer-ejs": "^0.3.0",
"hexo-renderer-stylus": "^0.3.1",
"hexo-renderer-marked": "^0.3.0",
"hexo-server": "^0.2.0"
}
}
3.3 scaffolds
模版 文件夹。当您新建文章时,Hexo
会根据 scaffold
来建立文件。
Hexo
的模板是指在新建的markdown
文件中默认填充的内容。例如,如果您修改scaffold/post.md
中的Front-matter
内容,那么每次新建一篇文章时都会包含这个修改。
3.4 source
资源文件夹是存放用户资源的地方。除 _posts
文件夹之外,开头命名为 _ (下划线)的文件或文件夹以及隐藏的文件将会被忽略。Markdown
和 HTML
文件会被解析并放到 public
文件夹,而其他文件也会被拷贝过去。
3.5 themes
themes 文件夹。Hexo
会根据themes
文件夹中的主题来生成静态页面。
结语:
至此博客整体框架搭建完成!接下来就是来美化自己的博客网站以及编写博客了!