Hexo搭建个人博客--进阶

hexo 搭建博客完整实现

Posted by Surflyan on 2017-01-26

前一篇博文已经交代了准备工作,完成以后,就可以开始搭建自己的博客了,本博文按照博主建站顺序来引导,从本地预览到上传 github ,再到绑定域名浏览。 希望可以帮助你快速完成搭建。开始吧。

安装 hexo

.
打开 Git bash ,执行:

$ npm install -g hexo

执行:

hexo -v

查看 hexo 是否安装完成,及hexo版本号

hexo 安装完之后,就可使用hexo,了解hexo的所有命令

如果想快速完成自己的博客,你也可以接着往下做,最常用的命令在后续都会讲到。

初始化

通过 cd 选择你想将博客文件放置的位置:

执行:

$ hexo init Blog     //自己设文件名,我设为Blog

将会在当前目录下生成一个名为Blog的文件夹。进入Blog:

$ cd Blog

执行:

$ npm install

完成以后,该文件夹下的目录结构如下:

生成静态文件

执行:

$ hexo generate

该命令会创建一个 public 文件夹,在 public 下生成所有的静态文件。有了静态文件,通过任何 web server 就可以独立运行网站了。

执行完该命令后,可以看到warning: LF will be... : 实际没什么影响,不习惯可通过执行下行代码消除:

$ git config --global core.autocrlf false

本地启动

执行:

$ hexo server

若成功启动则会看到如下

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

此时端口4000打开,打开浏览器,输入上面的网址,你会看到hexo默认的主题界面landscape,看到了吗?

下面是博主遇到的错误,如果不幸遇到,参见下面。

常见错误

1.执行 hexo server 出现:

Usage: hexo <Command>

执行:

$ npm install hexo-server --save

2.在浏览器输入 localhost:4000后出现:

cannot Get/主题或文件名

解决办法:
1.确定在站点配置文件(第一个此文件)_config.yml中的 root: /目录名
目录名为当前博客文件名;

2.本地 source/post 要有文件

3.在当前博客目录Blog下执行 : $ npm install

3.执行hexo sever,出现:

Cannot read property 'replace' of null

检查站点 _config.yml的 url: yoursite.com (保证有一个域名)

博客目录说明

博客目录下各文件说明 参见这里.

博客配置

在 Blog 目录下的_config.yml文件就是博客的配置文件,在这里可以对网站进行一些重要信息(如标题,网址等)的设定
这里是官方配置文件说明.

更换主题

如果不喜欢 hexo 默认的主题,现在就可以去选择一个自己喜欢的主题了。如果你是新手,可以到 hexo主题 选择偏爱的主题,如果有能力,也可以自己配置个性化主题。

更换主题,博主在这儿遇到不少坑。

选择主题

找到喜欢的主题,确保其是支持 hexo 的主题,从 github clone 到Blog theme文件夹中,或者也可以下载.zip在解压到Blog/theme文件夹中。
采用 clone 方式,在 theme 文件夹中,执行git bansh here
以 yilia 主题为例,执行命令:

$ git clone https://github.com/litten/hexo-theme-yilia.git themes/yilia

若采用解压缩方式,在解压以后修改文件夹名为主题名 yilia

修改theme

在站点配置文件_config.yml 中修改 theme:为 yilia.

注意: 后有一个空格;

如果你初始化了多个 Blog 文件夹,则在站点配置文件的 root:设为你的 Blog 文件夹名。

这时候你的主题就更换完成了。来验证一下吧。
检查你的站点 _config.yml:
url 这时候可以设为: yoursite.com
root: /Blog (你的博客目录)

执行以下代码:

hexo clean      //清除public文件
hexo generate   //生成public文件,可简写 hexo g
hexo sever      //启动本地服务器,可简写 hexo s

怎么样新的主题看到了吧。

上传 Github

你的博客在本地已经可以预览了,现在要做的就是上传到 Github 上。

如果你是直接 fork 了别人的主题,那么你只需要将你的仓库名称改为 your_github_name.github.io,你就拥有了存放博客的仓库。

如果你还没有存放博客的仓库,那么你需要新建仓库。

新建博客仓库

  1. 新建名为your_github_name.github.io的仓库;
  2. 打开 setting 页面,向下找到 GitHub Pages,开启Automatic page generator.

修改站点 _config.yml

在站点配置文件 _config.yml 中 deploy部分,设置为:

deploy:
      type: git
      repo: <your_reposotory url>     //例:https://github.com/Surflyan/Surflyan.github.io.git

执行命令:

$ hexo clean
$ hexo g
$ hexo d

这时候如果你没有配置 SSH Key , 会提示你输入账号密码,如果配置了则不会出现这步。
之后就部署成功了,可以到你的 github 上查看, 在Settings页面的 GitHub Pages 可以看到: Your site is published at your_github_name.github.io, 现在你就可以访问你的网站了。

常见问题

1.提示找不到 Git

Hexo 3.0 以后depoly git被分开,需要单独安装,命令如下:

npm install hexo-deployer-git --save

只能装好再次尝试。

2.上传样式丢失

当你激动不已的打开你的网站后,如果你发现只有一些文字,并没有样式的时候,检查你的站点 _config.yml

url: your_sitme
root: /                      //root 后/一定不能少

再次尝试上述三条命令。

如果你参看了其他教程或者 hexo 官方文档的话,他们都要求这样设置:

url: your_sime/Blog          //Blog为你的博客目录
root: /Blog

但是博主这样尝试并没有解决上传 github 样式丢失的问题。
在本地预览的时候 ,需要再次更改站点_config.yml 的 root 为
root: /Blog

这是博主遇到的较大的坑,并没有找更好的解决办法。

域名绑定

如果你没有购买域名,可以接受 github 提供的二级域名的话,可跳过这步。

确保你的域名 DNS 设置正确

source目录下新建文件名为CHAME的纯文本文件,无后缀,内容为你的域名:
your_site.com, 也可使用wwww.your_site.com的形式。

这是就可以提交 github 了,依旧执行这三条代码:

$ hexo clean
$ hexo g
$ hexo d

通过你的域名访问你的网站可以了吗。

新建文章

开始你的第一篇博文吧。
打开 Git bash 或者 本地命令行,进入你的博客目录,执行:

$ hexo new "我的第一篇博文"

此时在 source/_post 文件夹下就可看到你的第一篇博文,还有一个同名文件夹,用来存放该篇博文的用到的图片。
打开你的博文,就可以使用 Markdown 语法来写博文了,试试吧。

写完可先在本地预览。

可能不少朋友还会遇到在_post下删除了文章后,执行 hexo g后又恢复了,你需要先删除掉db.json文件,在执行hexo cleanhexo g.

结语

终于写完了,肩痛。
现在,你的博客基本成型了,但是要做的工作还有很多。下篇介绍后续处理。

请多多指教 !