1. 编写目的
介绍一个例子,使用前辈们的主题,编写自己的博客网站。
总体过程是非常简单的,但是安装hexo过程请自行百度。
2. 新建项目
- 在D盘新建myblog文件夹,打开Node.js控制台,跳转到目标地址,新建hexo项目。
需要下载一段时间,下载完了就可以作为自己的博客。d: cd myblog hexo init test
- 查看官网的主题
效果如下:cd test hexo s
浏览器打开localhost:4000网址,可以看到效果如下:
表示自己博客已经搭建成功,现在我们给它换个主题,更加好看一些。
3. 下载主题
可以去官网查看下载其他主题:https://hexo.io/themes/
以这位前辈作品为例子,查看效果:https://www.haomwei.com/
这个主题对应的github下载地址:https://github.com/tufu9441/maupassant-hexo
安装步骤和上面github介绍步骤一样。
也可以直接用浏览器在github地址上下载zip压缩包,推荐使用git命令下载。
git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant
npm install hexo-renderer-pug --save
npm install hexo-renderer-sass --save
后面两行命令是安装依赖,需要一些时间才能安装完成。如果安装不了,查资料发现可能需要使用cnpm
来安装(当然事先安装一下cnpm)。
4. 配置主题
这个时候查看test文件夹中的theme文件夹,可以发现自己下载了maupassant文件夹,现在需要配置项目,使用这个maupassant主题。
打开test/_config.yml,找到最后几行的“theme”,把默认的landscape改成maupassant。
5. 编写文章
为了让效果更加明显,修改默认的hello world文章,主要是添加分类和标签。
编辑test/source/_posts下的hello-world.md,在title下面添加分类和标签。
如下:(标签与分类名称自己取,不一定是hello world)
tags:
- Hello World
categories:
- Hello World
添加后效果如下:
6. 效果展示
保存后,启动hexo。
hexo s
然后打开浏览器查看效果:
当然,如果不喜欢这个英文的,可以修改test/_config.yml,修改为简体中文。
注意如果是其他主题,可能使用中文不是‘zh-CN’,要根据主题的languge文件夹中的yml文件名而定。
效果如下: