基于Hexo框架的独立博客搭建

see

本文将带领大家利用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的官方文档里已经说得很清楚了,所以大家可以去看看官方文档

在开始搭建之前,我们需要准备好如下几样东西:

Windows用户就不用多说了,Linux用户和Mac用户如果不清楚如何安装的话,可以参考一下Hexo的官方文档: https://hexo.io/zh-cn/docs/#%E5%AE%89%E8%A3%85%E5%89%8D%E6%8F%90

在安装好Node.js和Git之后,我们开始Hexo的安装:

方法很简单,一条命令全局安装Hexo:

1
$ npm install -g hexo-cli

安装顺利完成。然后,对于Ubuntu用户,Hexo是放在Node.js安装目录的bin里的,所以还需要软链接(不一定,视具体情况而定):

1
$ sudo ln -s /home/###/data/application/node-v##-linux-x##/bin/hexo /usr/local/bin/hexo
  • ###是你的电脑用户名,node-v##-linux-x##这里具体看你的Node.js版本

开始搭建

现在我们正式开始博客的搭建工作!

本地搭建

初始化

首先,你需要建立一个文件夹,建在哪里,名字叫什么随便你,这个文件夹将是我们的大本营。

进入这个文件夹,依次执行如下命令,开始Hexo的初始化:

1
2
$ hexo init
$ npm install

完成初始化后你的文件夹内的主要结构将是这样的:

1
2
3
4
5
6
7
8
9
.
|--- _config.yml //它是站点配置文件
|--- package.json //应用程序信息,一般 用不上
|--- scaffolds //模板文件夹,新建文章时,将根据它建立文件
|--- source //存放用户资源,除_posts外,所有以_开头的文件(夹)、隐藏文件将被忽略,Markdown、html文件将被渲染并存至public文件夹,其他文件也会被拷贝过去
| |--- _drafts
| |--- _posts
|
|--- themes //主题文件夹,将根据主题来生成静态页面

上述操作完成后,大家可以尝试依次运行如下命令,在本地查看博客情况:

1
2
$ hexo g //相当于 hexo generate 生成静态页面
$ hexo s //相当于 hexo server 在本地服务器运行

如果一切正常,你将看到如下提示信息:

1
$ Hexo is running at http://localhost:4000/. Press Ctrl+C to stop.

然后你就可以打开浏览器,访问http://localhost:4000/,你将看到:

first

这就是我们的博客啦,接下来你可以更改站点配置文件来初步设置你的博客信息,如博客名称(title)、作者(author)等。因为可能会更换主题的缘故,暂时不对主题配置文件进行修改。

主题配置

我们此时所使用的是默认安装的landscape主题,如果不喜欢这个主题,可以更换。

Hexo的主题安装也很简单,只需将主题文件拷贝到themes目录下即可,大家可以去Hexo的官网看看有哪些主题。

我在这里推荐两个主题:

另外,知乎上有不少朋友的推荐: https://www.zhihu.com/question/24422335

我们这里以NexT为例:

在站点根目录下:

1
$ git clone https://github.com/theme-next/hexo-theme-next.git themes/next

克隆好主题后,我们打开站点配置文件,将themes字段更改如下:

1
theme: next

然后运行hexo s在本地查看效果。

大家在themes目录下的next目录中也能看见一个_config.yml文件,它是主题配置文件,将帮助大家完成主题的配置。NexT主题是非常强大的,具体配置请大家查看next文档,百度一下也能找到很多关于next主题的文章,足以帮助大家完成主题配置,以后有时间我也会写一些关于next优化的文章。

文章

如果要新建文章或页面,可以执行以下命令:

1
2
$ hexo new "文章名字" //生成新文章,可以在_posts中看到。也可以直接在_posts里新建文本文档,后缀改成md就行...
$ hexo new page "页面名称" //生成新页面

_posts目录下,打开你新建的md文件,你就可以开始编辑了,一篇文章的结构一般是这样:

1
2
3
4
5
6
7
8
9
10
11
12
13
---
title: 文章名称
date: 建立日期
categories: 文章分类 //如有多个,格式为[分类1,分类2,分类3]
tags: 文章标签 //如有多个,格式同上
---
//以下是正文部分,支持Markdown格式

...

<!--more--> //如果有这个标签,后面的内容需点击“阅读全文”方可见.

...

Markdown的具体语法请自行查阅。

部署博客至Github和Coding

配置好主题后,我们就已经基本完成了博客的搭建工作,接下来我们要做的是将它部署至Github和Coding,然后大家就可以通过https://yourname.github.iohttps://yourname.coding.me来访问自己的博客啦。

是部署到Github上还是Coding上随便大家啦,这里说这么几点:

  • Github是最专业的!最专业的!最专业的!
    • 但是github page是封禁了百度蜘蛛的,也就是说,部署到github的话,百度很难收录你的博客。
    • 以上都不重要,重要的是,github是专业的!专业的!专业的!
  • Coding是国内的网站
    • 它不封禁百度蜘蛛。
    • 如果要用自定义域名,银牌会员及以下会出现跳转页,有点烦,必须在首页添加一行hosted by coding pages(看我多自觉,虽然是金牌会员,我还是加了这句话),通过审查后才会取消跳转页。
  • 我同时将博客部署到了github和coding,然后blleng.top域名的CNAME解析默认线路选择blleng.github.io,搜索引擎线路选择blleng.coding.me。(有时间再详说)

注册Github和Coding

怎么注册我就不说了吧,唯一提醒一点,用户名请三思,以后博客的地址就是https://用户名.gihtub.iohttps://用户名.coding.me

然后,在Github上:

  • 创建一个Repository
    • 将它取名为用户名.github.io
    • 请勾选README//我的习惯,随便大家

如果要部署到Coding上:

  • 新建一个项目
    • 取名为用户名.coding.me
    • 也启用README

部署博客

接下来我们就要将博客部署到github或coding了。

首先,我们要将自己的电脑与它们联系起来。

我们先为Git设置一下usernameemail:

1
2
3
$ git config --global user.name "your_name"
$ git config --global user.email "your_email"
//用你的用户名代替your_name,电子邮箱地址代替your_email

运行命令:

1
2
$ ssh-keygen -t rsa -C email_address
//用你的电子邮箱地址代替email_address

下面只需不断回车就好,成功之后,将在~/文件夹下(windows用户具体为你的C盘用户文件夹下)生成一个.ssh文件夹,进入这个文件夹,打开id_rsa.pub文件,将里面的全部内容复制下来,它们长这样:

1
ssh-rsa ....一长串字符.....

添加 SSH Key:

github:

  • 点击头像,进入setting,进入SSH and GPG keys,点击New SSH key,粘贴好你刚刚复制的内容,随便填个title,然后添加

coding:

  • 点击头像,进入我的账号,进入SSH公钥,粘贴,添加,完毕

添加SSH后效果如图:

github_ssh

coding_ssh

可以验证一下SSH到底设置好没有:

github:

1
$ ssh -T git@github.com //可能会提示是否继续,输入yes然后回车

成功的话,结果是:

1
$ Hi blleng! You've successfully authenticated, but GitHub does not provide shell access.

coding:

1
$ ssh -T git@git.coding.net

结果:

1
2
$ Coding 提示: Hello blleng, You've connected to Coding.net via SSH. This is a personal key.
$ blleng,你好,你已经通过 SSH 协议认证 Coding.net 服务,这是一个个人公钥

部署之前,我们还需要一个插件的支持:

1
$ npm install hexo-deployer-git --save

然后更改站点配置文件,在最后面:

1
2
3
4
5
6
7
deploy:
type: git
repo:
github: git@github.com:你的用户名/你的用户名.github.io.git,master
coding: git@git.coding.net:你的用户名/你的用户名.coding.me.git,master

//如果只部署到github就把coding那一行删了就好

我们接下来可以开始部署,运行命令:

1
2
$ 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开启后,效果如图:

github_pages

coding_pages

检查之后,若无其它问题,我们就可以通过https://yourname.github.iohttps://yourname.coding.me来访问你的博客了。

至此,博客的初步搭建工作就完成了,如果还有什么疑问可以给我留言。

最后更新于18-08-13
助力本站发展