初始化博客文件夹
选择一个文件夹作为博客文件夹,如 D:\HexoBlogGithubD:\HexoBlogGithub>hexo init
Hexo基本配置
在 _config.yml 中修改大部份的配置
网站
1 | # Site |
网址
1 | ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' |
url
是网址,root
是网站根目录,如果想把文章放在子目录blog中,那么url 设置为 http://yoursite.com/blog
,root 设置为 /blog/
permalink
是文章永久链接,按照默认是以: http://xxx.com/2018/08/31/your-title/ 的格式。你可以设置成 blog/:year-:month-:day-:title.html/
,则是:http://xxx.com/blog/2018-08-31-your-title.html/ 的格式
文章
1 | # Writing |
分类 标签
1 | # Category & Tag |
hexo默认是以tag来分类,可以自设置 category_map(为了让url中尽量少出现中文,做的映射)
1 | default_category: uncategorized |
在md文件开头标注目录为 (Hexo不支持指定多个同级分类)1
2
3
4---
categories: 数据分析
---
在url中会显示成 .../blog/data_process/xxx.html
扩展
1 | # Extensions |
写作
新建文章
1 | hexo new [layout] title |
可以指定文章的布局(layout),默认是post(参考上文可设置default_layout 参数)
- 布局
三种默认布局 post、draft、page,分别对应不同的路径,而自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹
布局 | 路径 |
---|---|
post | source/_posts |
page | source |
draft | source/_drafts |
- draft(草稿)布局及发布
草稿默认不会显示在页面中,可以设置(参见上文) render_drafts 参数设为 true 来预览草稿
可通过执行publish指令,将草稿移动到 source/_posts 文件夹中发布
hexo publish [layout] <title>
文章目录
默认不会开启目录,如果想开启,在md文件头加上1
2
3
4---
...
toc: true
---
会自动根据标题权重进行目录生成。显示在右边。
参考文章为Hexo博客添加目录
注意:默认的主题Landscape并不支持目录的显示,只有通过如下修改才能显示
- 修改
landscape/layout/_partial/article.ejs
文件中,显示文章正文部分的代码:
在 <%- post.content %>
的前面,插入:1
2
3
4<div id="toc" class="toc-article">
<strong class="toc-title">文章目录</strong>
<%- toc(post.content) %>
</div>
- 配置目录的css样式,修改
themes/landscape/source/css/_partial/article.styl
添加如下样式1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22/*toc*/
.toc-article
background #eee
border 1px solid #bbb
border-radius 10px
margin 1.5em 0 0.3em 1.5em
padding 1.2em 1em 0 1em
max-width 28%
.toc-title
font-size 120%
#toc
line-height 1em
font-size 0.9em
float right
.toc
padding 0
margin 1em
line-height 1.8em
li
list-style-type none
.toc-child
margin-left 1em
安装 hexo-server启动服务
1 | npm install hexo-server --save |
你可以使用指令 hexo server
(server可简写s)启动服务器,网站会在 http://localhost:4000 下显示。
在静态模式下,服务器只处理 public 文件夹内的文件,而不会处理文件变动,在执行时,您应该先自行执行 hexo generate,此模式通常用于生产环境(production mode)下。
指定端口 -p
默认4000,可改为5000,如hexo server -p 5000
指定IP -i
服务器默认运行在 0.0.0.0,可更改,如hexo server -i 192.168.0.1
生成静态文件并部署
hexo generate
,generate可简写g。静态文件在public目录下hexo generate --deploy
, 可简写成hexo g -d
,Hexo 在生成完毕后自动部署网站
部署及设置
同上文,hexo deploy
是在生成静态文件后部署,也可以使用 hexo deploy --generate
(简写为 hexo d -g
)
清除缓存
hexo clean
,清除缓存文件 (db.json) 和已生成的静态文件 (public)。
优化配置
搜索引擎优化(SEO)
添加百度主动推送代码,让搜索引擎最快发现文章 .
方法: 在 <博客根目录>/themes/yilia/layout/_partial/article.ejs 的尾部评论位置, 添加:1
2
3
4
5
6
7
8
9
10<% if (!index){ %>
<script>
(function(){
var bp = document.createElement('script');
bp.src = '//push.zhanzhang.baidu.com/push.js';
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
</script>
<% } %>
Hexo给博客添加图片
在项目的 source/
文件夹下新建一个文件夹,如Markdown_images
,把你要写在博客中的图都存在该文件夹下,博客中按照类似 ![](/Markdown_images/image_name.jpg)
的写法就OK
向服务器提交后,再次打开博客就能看到你想要的图片了
- 可以进一步参考:Hexo博客中插入音乐