Hexo是一个基于NodeJS简洁高效的博客框架, 本文详细介绍了自己基于Hexo和NexT主题搭建自己个人网站,并且部署到AWS和阿里云ECS服务上的过程。并且深度定制了自己的个人网站,仅作为自己的一个备忘和对他人的一份有些许价值的参考。
阿里云服务器端
购买ECS服务
之前是利用GitHub Pages + Hexo 部署的博客,因为强迫症想要更加全面的掌控自己的博客,决定在自己的服务器上部署Hexo博客。
现在各大厂商都有自己的ECS服务,同时针对学生也有固定的学生优惠。我选择的是阿里云云翼计划的云服务器ECS服务。
配置如下
- 1核CPU Intel Xeon E5-2682 v4
- 2G DDR4 内存
- 1M带宽 VPC专有网络, I/O 优化
- 40G系统盘
这一套下来官网价格得要1452RMB,用学生优惠下来只需要114RMB,显然实惠很多。
购买域名
既然都已经有了自己的服务器了,自然就想,为何不整一套自己的域名呢?
域名可以在国外知名域名注册厂家Godaddy和NameCheap等购买,也可以使用国内的阿里云万网和腾讯云的域名注册服务购买。但是看着国外域名随随便便一年十几刀的费用,我还是老老实实用万网的服务买的域名。
houmin.cc
用160RMB买了10年的域名服务,从2017年到2027年。
因为某些不可知的因素,cc域名从2018年起不能在国内备案了,导致我现在这个域名也一直不能备案,不过还是可以解析的。购买域名服务后,修改域名解析服务,将域名指向我们自己的阿里云服务器。
服务器环境搭建
配置安全组规则
由于阿里云是默认不授权80端口的访问的,所以我们要手动配置。
打开阿里云服务器管理控制台->点击左侧安全组->点击右侧的配置规则->点击添加安全组规则
配置服务器环境
服务器采用的是Ubuntu 16.04,作为一个网站,必定要有一个web server,这里采用的是Nginx
1 | sudo apt-get install nginx |
这个时候打开浏览器,输入服务器的公网IP地址,就可以看到Nginx的默认网页了。
关于Nginx当前采用的是默认配置,我们的目标是让这个网站的默认地址指向我们的博客,是不是默认的这个欢迎界面。这就需要我们去修改Nginx的默认配置。Nginx的配置文件在Ubuntu下放在了/etc/nginx
的目录下,我们可以看到该目录下有sites-available
和sites-enabled
,其中sites-enabled
里面的default就是sites-available
下面default的一个软链接。打开default我们可以看到
1 | Default server configuration |
当前Nginx监听在80端口,默认没有打开HTTPS,同时网站的源代码放在了/var/www/html
目录下。进入这个目录,我们也确实可以看到一个index.nginx-debian.html
文件。这就是我们看到的默认Nginx的欢迎页面。
为了创建我们自己的网站,我们需要类似的有同样的配置
- 创建存放网站源文件的目录,这里我们创建的是
/var/www/houmin.cc
- 创建我们自己网站的配置文件,在
/etc/nginx/sites-available
中,这里我们叫houmin.cc
- 在
/etc/nginx/sites-enabled
中删去default,并且创建一个对houmin.cc
配置文件的软链接。 - 删除
/etc/nginx/sites-enabled
中的default
1 | sudo mkdir -p /var/www/houmin.cc |
其中新的配置文件中只是修改了网站root的目录,其他地方没有做修改。这时候在/var/www/houmin.cc
目录下放置一个新的html文件,输入公网IP应该可以新的网页了。
配置Git服务
网站的源文件通过git进行版本管理,每一次更新源文件之后,可以通过git的hook操作自动更新到Nginx的目录下。因此,我们需要在服务器上面搭建一个自己的git服务器,具体的操作如下:
- 创建git用户,并且授予其sudo权限这时候在服务器上以git用户登陆,可以在
1
2sudo adduser git
sudo usermod -aG sudo git/home/git
目录下创建repositories目录,专门用作git服务器放置repo的地方。
1 | git@cosmos:~/repositories$ git init --bare blog.git |
这时候在客户端应该是可以clone这个repo的1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 git clone git@houmin.cc:/home/git/repositories/blog.git
Cloning into 'blog'...
git@houmin.cc's password:
warning: You appear to have cloned an empty repository.
touch hello.md
echo "Hello, Git" >> hello.md
git add hello.md
git commit -m "Add hello.md"
git push -u origin
git@houmin.cc's password:
Counting objects: 3, done.
Writing objects: 100% (3/3), 219 bytes | 219.00 KiB/s, done.
Total 3 (delta 0), reused 0 (delta 0)
To houmin.cc:/home/git/repositories/blog.git
* [new branch] master -> master
Branch 'master' set up to track remote branch 'master' from 'origin'.
为了避免输入密码,可以在本地机器执行1
ssh-copy-id git@houmin.cc
为了实现自动部署,我们需要利用git的hook功能。
我们进入到blog.git目录,1
2
3
4git@cosmos:~/repositories/blog.git/hooks$ cat post-receive
git --work-tree=/var/www/houmin.cc --git-dir=/home/git/repositories/blog.git checkout -f
git@cosmos:~/repositories/blog.git/hooks$ chmod +x post-receive
git@cosmos:~$ sudo chown -R git:git /var/www/houmin.cc
这里通过创建post-receive
这个hook,在每次git push
将项目最新的文件复制到work tree下
通过这种方式,是可以看到/var/www/houmin.cc
目录下的文件实时的发生更新。为了能够使用git用户更新houmin.cc目录下的文件,需要将该目录的所有者更改为git。
这时候通过ip访问,是可以看到Nginx的默认网页的。
阿里云劫持未备案的请求
这个时候,如果通过域名访问的话,会告诉你houmin.cc没有备案。也就是说,通过访问 http://houmin.cc
阿里云会自动识别这个域名所属的服务器没有备案过,会自动劫持请求。
啊是的,你现在也不让我备案了啊(工信部在2018年停掉了cc
域名的备案),怎么办呢?查阅资料发现,有人说可以通过开启HTTPS解决这个问题,再仔细一看这个是在2019年上半年的解决方案,阿里云在2019年年中的时候就将没有备案的云服务器通过https的请求也给劫持了。
然后在整https的时候也试了好几种方案,
- let’s encrypt
- acme.sh自动
- cloudflare免费十年证书
采用这三种方案的时候,都因为访问阿里云服务器被劫持了导致没能成功。为了解决这个问题,可以有两个方案
- 重新申请可以备案的域名,老老实实备案,这个需要20天的时间
- 使用国外的云服务,比如AWS,可以先免费白嫖一年
这两个方案我同时都在进行,一边买了houmin.site
十年的域名,一边又申请了AWS的免费一年的EC2服务。
现在的状态:
- 备案时间较长,仍在进行中
- EC2服务申请成功后,将
houmin.cc
解析到EC2上,这时候是可以成功通过域名访问网站的。
关于HTTPS的部分,可以参考 开启HTTPS
客户端环境搭建
配置信息
1 | OS: Ubuntu 18.04 LTS |
安装NodeJS
- 从官网下载系统对应的源码
- 依次执行以下命令解压编译安装
1 | $ tar -xzvf node-v8.10.0-linux-x64.tar.xz |
安装Hexo
1 | $ npm install -g hexo |
建站
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
1 | $ hexo init <folder> |
新建完成后,指定文件夹的目录如下
1 | . |
接下来安装 Hexo 关于启动服务器的插件
1 | $ npm install hexo-server --save |
这个时候可以启动服务器, 本地查看打开 http://localhost:4000 查看效果效果, 如果不指定端口,默认为40001
$ hexo server
主题和配置
这里选择的主题为NexT,下面介绍配置主题的主要步骤
- 前往 NexT主题发布界面下载主题压缩包
- 解压并将目录更名为next
- 将 next 移动至 blog/themes/ 目录下
- 将 blog 目录下的 _config.yml 文件中的 theme 属性值改为 next
- 此时主题更换成功,可启动 server 验证效果
将博客部署到阿里云
- 在阿里云的git服务器上新建blog的仓库
1
2git@cosmos:~/repositories$ git init --bare blog.git
# add post-receive hook 安装 hexo 关于 git 的组件
1
$ npm install hexo-deployer-git --save
在
_config.yml
中为 git 添加配置1
2
3
4deploy:
type: git
repository: git@houmin.cc:/home/git/repositories/blog.git
branch: master- 执行(每次修改都要执行这些命令才能在github pages看到效果)
1
2$ hexo generate # generate static files
$ hexo deploy #Deploy to remote sites
Next主题基本功能配置
Hexo依赖安装
下面是当前配置下需要安装的dependency
1 | { |
可以在博客目录下执行下面命令即可安装上所有的依赖
1 | sudo npm install --production |
定制favicon
1 | favicon: |
网站 favicon 图标可以放到你的 next 主题目录下面的source/images
中,然后按照上述相对路径方式引用,这里 favicon 图标不需要非得是 ico 格式的,也可以是 png 或其它图片格式。
如果是有第三方图床放图片链接的,也可以直接改成图片链接。
社交信息
1 | social: |
这里有一个问题就是豆瓣没有对应的font awesome
图标
友情链接
阅读更多
如果不开启阅读更多按钮的话,默认是展示文章中所有内容的,这显然体验不好。
一般都会在文章中插入<!--more-->
这种注释形式表示首页展示到注释处为止。或者会使用如下官方配置文件中自带的方式。一般都推荐使用注释的方式,因为下面这种auto_excerpt
方式不会保留前面的行文样式,但是注释方式会保留样式。
搜索 auto_excerpt,找到如下:
1 | auto_excerpt: |
侧边栏头像设置
1 | # Sidebar Avatar |
代码设置
1 | codeblock: |
这里指的是代码块,不是行内代码块,起始写法如下:
1 | ```[language] [title] [url] [link-text] |
- [language] 是代码语言的名称,用来设置代码块颜色高亮,非必须;
- [title] 是顶部左边的说明,非必须;
- [url] 是顶部右边的超链接地址,非必须;
- [link text] 如它的字面意思,超链接的名称,非必须。
亲测这 4 项应该是根据空格来分隔,而不是[]
,故请不要加[]
。除非如果你想写后面两个,但不想写前面两个,那么就必须加[]
了,要这样写:[] [] [url] [link text]
。
1 |
|
可以在站点配置文件_config.yml中设置自动高亮
1 | highlight: |
文章元数据设置
元数据就是显示在 home 页的文章创建于、更新于、阅读次数之类的数据,搜索 post_meta,找到如下配置:
1 | post_meta: |
文章字数统计设置
由于上面的元数据中没有带文章字数统计功能,需要利用hexo-symbols-count-time
插件来完成。在 hexo 站点根目录下使用npm install hexo-symbols-count-time --save
命令安装模块后开启上述功能使用。
配置站点配置文件激活插件
1 | symbols_count_time: |
配置主题配置文件
1 | # Post wordcount display settings |
博客本地搜索
Hexo的NexT主题通过hexo-generator-searchdb
这个插件实现搜索本地搜索。它预先生成了一个文本库search.xml
,然后传到了网站里面,在本地搜索时候,NexT直接用JS调用这个文件,从而实现了静态网站的本地搜索。
安装完插件后,站点配置文件新增
1 | search: |
主题配置文件
1 | local_search: |
RSS订阅
安装插件:
1 | npm install hexo-generator-feed --save |
刷新主页就可以看到 rss。
文章打赏
主题配置文件
1 | # Reward (Donate) |
文章推荐
开启文章推荐功能后可以自动推荐相关内容的文章,在主题配置文件中
1 | related_posts: |
开启相关文章推荐需要安装hexo-related-popular-posts
模块,即在 hexo 站点根目录下使用npm install hexo-related-popular-posts --save
安装模块,然后开启上面的相关文章功能就可以了。
文章版权声明
在主题配置文件中
1 | creative_commons: |
评论系统
在当前免费开源的评论系统中,基于leancloud的valine不仅简洁,还可以支持匿名留言。leancloud是一个面向个人用户免费的存储系统,valine后台的评论保存就是基于leancloud的。
1 | valine: |
为了评论能够及时通过邮箱通知,可以使用 Valine-Admin 来配置。
不蒜子统计网站访问信息
可以通过不蒜子服务来统计网站的访问信息,包括整个网站的UV(Unique Visitor)和PV(Page View),还有每一个post的访问数。
1 | busuanzi_count: |
注意这里的post_views和配置文件中leanCloud_visitors冲突,这里只开启了不蒜子的服务。
Next主题进阶优化配置
插入音乐
插入音乐可以直接通过网易云音乐生成外链,也可以使用 hexo-tag-aplayer 插件中 MetingJS的支持。
安装了hexo-tag-aplayer
插件之后,在Hexo配置文件中加入‘
1 | aplayer: |
接着就可以在文章中使用MetingJS播放器了
1 | # 歌曲模板 |
对于网易云音乐因为版权保护无法生成外链从而获取ID的问题,可以参考hexo在文章插入aplayer音乐播放器
插入视频
插入视频可以直接通过B站生成外链,也可以通过插件 hexo-tag-dplayer
- 直接用生成外链
1 | <iframe src="//player.bilibili.com/player.html?aid=74371709&cid=127218978&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> |
hexo-tag-dplayer
1
{% dplayer "url=https://什么什么什么.mp4" "https://封面图.jpg" "api=https://api.prprpr.me/dplayer/" "id=" "loop=false" %}
要使用弹幕,必须有
api
和id
两项,并且若使用的是官方的 api 地址(即上面的),id 的值不能与这个列表的值一样。id 的值自己随便取,唯一要求就是前面这点。如果唯一要求难倒了你,可以使用这个工具将一段与众不同的文字😂生成一段看起来毫无意义的哈希值,这样看起来是不是好多了。插入
Youtube
或者Viemo
视频
1 | {% vimeo video_id %} |
这里的video_id
就是视频分享时生成短链接后面的字符。
数学公式
NexT主题里面已经集成了MathJax和KaTex,配置起来也很方便。这里我们使用MathJax来渲染数学公式。
在主题配置文件中,
1 | math: |
Hexo默认的渲染引擎hexo-renderer-marked
对MathJax的支持很不好,会出现各种莫名其妙的问题。NexT主题的官方文档也推荐换用其他渲染引擎。推荐换用hexo-renderer-kramed
。
这里是一个典型的LaTeX公式示例,在markdown中的源代码和现实效果如下:
1 | $$\frac{1}{m}\lg C=\frac{1}{n}\left(\sum_{i=1}^n{Y_i+\frac{1}{m}\sum_{i=1}^n{X_i}}\right)$$ |
关于更多和LaTeX相关的内容,可以参考 LaTeX笔记
添加豆瓣读书/电影
hexo-douban是一个支持引入豆瓣读书和电影的hexo插件,它通过爬取豆瓣用户的对应信息,从而生成对应的html文本。
你可以参考官方README或者 在Hexo博客中加入豆瓣读书页面参考部署。
当然作者所做的界面是没有样式的,我们可以在作者的基础上继续魔改增加自己喜欢的样式,在安装好所需插件后,我们打开目录为hexo/node_modules/hexo-douban/lib/templates/index.css
文件,里面是整个阅读界面的 css 样式代码文件,我们可以在其中添加背景图片等样式,比如可以添加如下:
1 | .main { |
修改上面的 url 中地址图片链接就可以新增背景图片了~
文章摘要图片
文章摘要(excerpt)是指每篇文章(post)在页面(page)上显示的那部分内容,也就是 [Read More] 之前的文章内容。由于它会展示在页面,因此在每篇文章的文章摘要中加一张图片,页面看起来就很美观。但是有时候可能会出现一个问题:你想从文章中选一张图片作为文章摘要图片,而这张图片由于写作要求,必须添加在文章的末尾,这样点 [Read More] 查看文章时,这张图片就会重复出现了。咋办?
前提是在主题配置文件中:
1 | excerpt_description: false |
首先加代码:
1 | {% if is_index %} |
为了防止有的图片宽度不够导致风格不够统一,页面不美观,需要在hexo/source/_data/styles.styl
中加入:
注意,目前自定义的样式文件在hexo/source目录下,这里需要自己创建_data/styles.styl
文件,同时在主题配置文件中修custom_file_path
1 | img.img-topic { |
最后编辑有这需求的相关文章时,在Front-matter
(文件最上方以---
分隔的区域)加上一行:
1 | image: url |
url
即图片的链接地址~
永久性链接
Hexo 默认生成的文章地址路径是 :year/:month/:day/:title/
。这种链接对搜索爬虫很不友好,因为它的 url 结构超过了三层,太深了;而且,如果修改了文章的文件名,就相应会修改其路径,无法保证链接的永久性,所以需要进行修改。
这里使用插件 hexo-abbrlink
来生成博客文章的永久链接,可以查看该插件的 GitHub 项目页面。首先需要进行安装:
1 | $ sudo npm install hexo-abbrlink --save |
然后在站点配置文件中修改 permalink
:
1 | -permalink: :year/:month/:day/:title/ |
定制回到顶部
从 Yearito’s Blog 看到的,效果如下:
原理很简单,将 back-to-top 按钮添加图片背景,并添加 CSS3 动效即可。
首先,找到自己喜欢的图片素材放到 source/images
目录下。
你可以点击下方按钮下载本站所使用的小猫上吊素材( 小猫咪这么可爱,当然要多放点孜然啦…)
然后在自定义样式文件hexo/source/styles.styl
中添加如下代码:
1 | //自定义回到顶部样式 |
刷新浏览器即可预览效果。
定制 sidebar
在hexo/source/_data/styles.styl
中添加
1 | .sidebar { |
在images目录下添加背景图片作为sidebar的背景图片。
定制 header
1 | .header { |
定制 footer
1 | .header { |
定制网站背景
1 | body { |
定制字体
开启分享
已运行时间
热门文章页面
Next主题扩展功能
使用hexo-admin在线发布文章
在本地部署hexo-admin
一直想给自己的博客添加一个后台在线编辑的功能,搜了一下发现社区已经有 hexo-admin 这个插件。 hexo-admin
可以将常规的hexo命令(new, deploy等)可视化,并且提供了一个在线的markdown编辑器,使得编写hexo blog脱离了本地开发环境和IDE,从而更加灵活。
要使用这个工具,首先需要安装插件:
1 | sudo npm install --save hexo-admin |
在客户端机器安装好插件之后,在博客根目录下面使用hexo s -d
命令,然后打开http://localhost:4000/admin/
进行登录就可以管理后台了。
安装好后,还需要设置登录的账号密码,不然谁都可以使用你的后台管理。第一次登录后,进入setting
菜单,点击Setup authentification here
进入用户名密码设置项,按照提示设置后,把生成的代码添加到blog/_config.xml
中,如:
1 | # hexo-admin authentification |
在blog目录下创建对应的 hexo_deploy.sh
文件
1 | cd blog; |
文件内容如下
1 | !/bin/bash |
注意,这里的 password_hash
是你自己的明文密码经过加密后的字符串,但是如果用类似下面的网址: https://bcrypt-generator.com/ 会生成:$2y$10$pJjIxxxxxfMn9U/xxxxxNuuA20kh1eoB7vZxxxxx/7WpeV7IOxxxx
类似的加密串,但是运行会报invalid salt revision
错误,其原因是:
1 | $ cat node_modules/hexo-admin/www/bundle.js | head -4851 | tail -10 |
需要版本号是2a的加密方式,因此只能用python自己写了:
https://pypi.org/project/bcrypt/3.1.0/
1 | >> hashed = bcrypt.hashpw(password, bcrypt.gensalt(prefix=b"2a")) |
经过这些设置之后,进入后台,就可以在线创作博客了。admin的后台有一个deploy的按钮,点击这个按钮就会执行hexo_deploy.sh
的脚本。该脚本会将markdown文件生成静态网页,如果用nginx配置去访问静态网页,速度就会快很多。
在服务器端部署hexo-admin
上面的部署有一个问题,就是我是想让我的在线博客具有后台编辑的功能,而不是必须在我本地启动hexo。那么要解决这个问题,必须要在服务器端运行hexo server
的进程。
在之前的部署中
- 我们都是在服务器端只是部署了nginx,在客户端机器安装了hexo的环境,所有hexo的配置都是在客户端机器上的。
- 每次在客户端更新了hexo源文件后,在客户端环境执行
hexo generate && hexo deploy
将生成的public目录下的网站源文件通过git传到服务端的git服务器目录。 - 服务器端的git服务器通过
git hooks
将对应的文件复制到nginx对应的root目录
要在服务端运行hexo server
的命令,我们需要在服务端有hexo server
运行的环境。这个环境其实也就是安装了所有插件之后的blog根目录。好在我们已经将blog目录通过git做了版本控制,这里的版本控制不仅仅监控发布post的版本,还监控网站主题各种配置的版本。
之前我每次更新后会将这个push到github自己的一个私人目录下。现在可以push到自己的git服务器,然后通过 git hooks
自动更新到某个固定的目录。通过 hexo-admin
后台编辑发布新文章会更新这个blog的目录,本地的blog可以通过git fetch
拉取远端的最新情况。
说干就干,具体操作如下
服务器端创建新的blog的repo
在前面的操作中我们配置Git服务,这个repo是存放的是generate出来的网站源文件,现在我们还是在git用户的repositories目录下新创建一个repo,不过这个repo里面存放的是blog的源文件,通过这个blog源文件,执行hexo generate
的命令可以生成网站的源文件。
1 | cd /home/git/repositories |
修改Nginx的配置文件,是的其root地址指向hexo产生的目录
1 | server { |
重启nginx服务,应该就能够看到网站能够再次运行了
使用pm2保持hexo server一直在服务器后台运行
pm2是一个专门为NodeJS开发的进程管理工具,支持管理node进程,查看node进程的状态,也支持性能监控和进程守护。因为使用 hexo server -d &
在一段时间后会停止hexo,此时无法打开后台,所以我们采用pm2接管hexo进程。
在服务器端,
1 | sudo npm install -g pm2 |
在服务器端博客的根目录下创建一个hexo_run.js
的文件,内容如下
1 | const { exec } = require('child_process') |
运行开启命令
1 | pm2 start hexo_run.js |
附上一个hexo重启脚本,restart_hexo.sh
, 需要重启刷新的时候执行 source restart_hexo.sh
即可
1 | !/bin/bash |
注意,我们可以看到hexo_run.js
里面通过让hexo server
监听在50003的端口,然后用pm2管理这个进程。在nginx的配置里面,用户通过http://houmin.cc/admin
的请求,会被nginx重定向到hexo server那里。所以,你需要在云服务厂商那里配置安全组策略,开放这里的50003端口,使得用户可以访问对应的后台。
在客户端编辑博客
可以看到我们现在可以在线编辑博客,那么如果我们想在客户端机器上本地编辑博客怎么办呢?
这里需要修改一下站点的配置文件
1 | deploy: |
这里每次更新之后还是可以执行hexo generate && hexo deploy
去更新博客,只是在blog的git hooks
需要修改为
1 | !/bin/bash |
注意这里的work-tree改成了新的目录
相册管理
对于相册,在自己博客上期待实现的效果与豆瓣相册类似,具体如下
- 主界面
- 分类相册
- 自定义相册名
- 自定义封面
- 自动裁剪封面为等尺寸
- 分类相册界面
- 三等分列
- 按图片原长宽比平铺
- 点击看大图
- 本地图片源/图床外链均可
- 与文章插图格式保持统一
- 其他
- 每张图片都可以有对应的文字描述
- 游客可以为图片添加评论
- 相册里面也可以插入视频
2019.12.05更新:终于填坑把相册这一块给补上了,参考 Hexo NexT主题添加多级相册功能
项目管理
资源库
开启HTTPS
现在个人博客开启HTTPS可以看到 cloudflare
和 letsencrypt
两种方案,这里的是 letsencrypt
的方案,参考博客 教你快速撸一个免费HTTPS证书
安装 certbot
Certbot可以用于管理(申请、更新、配置、撤销和删除等)Let’s Encrypt证书。这里安装的是带nginx插件的certbot:
1 | sudo apt-get update |
申请证书
使用certbot命令为houmin.cc申请HTTPS证书。—nginx选项表示Web服务器为nginx,-d选项指定域名,-n选项表示非交互式运行命令。若去除-n选项,则终端会提醒你选择是否将http请求重定向为https请求。
1 | certbot --nginx -d houmin.cc |
证书申请成功之后,会看到以下信息。Let’s Encrypt证书的有效期只有3个月,但是Certbot会通过Cron和systemd timer自动更新证书,证书的时效性不用担心。
1 | IMPORTANT NOTES: |
当前的nginx配置文件如下:
1 | server { |
博客写作进阶
Note标签使用
1 | {% note default %} |
默认形式的类别
1 | {% note primary %} |
首要类型形式
1 | {% note info %} |
info形式
1 | {% note success %} |
success形式
1 | {% note warning %} |
warning形式
1 | {% note danger %} |
danger形式
文本居中引用
1 | {% cq %} |
人生乃是一面镜子,
从镜子里认识自己,
我要称之为头等大事,
也只是我们追求的目的!
Tabs标签
1 | {% tabs 选项卡, 2 %} |
这是选项卡 1
这是选项卡 2
这是选项卡 3
插入 PDF
1 | pdf: |
使用方法
1 | {% pdf url [height] %} |
Label
1 | {% label [class]@Text %} |
1 | Lorem {% label @ipsum %} {% label primary@dolor sit %} amet, consectetur {% label success@adipiscing elit, %} sed {% label info@do eiusmod %} tempor incididunt ut labore et dolore magna aliqua. |
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
博客推广及优化
添加robots.txt
robots.txt是搜索引擎蜘蛛协议,告诉引擎哪些要收录,哪些禁止收录。
source文件夹下新建 robots.txt,内容如下:
1 | User-agent: * |
URL持久化
大家知道 hexo 默认的链接是 http://xxx.yy.com/2018/07/14/hello-world
这种类型的,这源于站点目录下的配置 _config.yml
里的配置 :permalink: :year/:month/:day/:title/
,这种默认配置的缺点就是一般文件名是中文,导致 url
链接里有中文出现,同时多层目录也不利于SEO。
hexo-abbrlink
这个插件,猜测是根据时间点算出的最终链接,这样就确保了博文链接的唯一化,只要不修改 md 文件的abbrlink的值, url 就永久不会改变。如此 md 文件名和文件内容也可以随便改了。后面的层级更短,这样也有利于 SEO 优化。
安装:1
npm install hexo-abbrlink --save
配置:
站点配置文件里:1
2
3
4permalink: post/:abbrlink/
abbrlink:
alg: crc32
rep: hex
百度蜘蛛抓取网页的规则: 对于蜘蛛说网页权重越高、信用度越高抓取越频繁,例如网站的首页和内页。蜘蛛先抓取网站的首页,因为首页权重更高,并且大部分的链接都是指向首页。然后通过首页抓取网站的内页,并不是所有内页蜘蛛都会去抓取。
搜索引擎认为对于一般的中小型站点,3层足够承受所有的内容了,所以蜘蛛经常抓取的内容是前三层,而超过三层的内容蜘蛛认为那些内容并不重要,所以不经常爬取。出于这个原因所以permalink后面跟着的最好不要超过2个斜杠。
添加nofollow标签
nofollow
标签是由谷歌领头创新的一个反垃圾链接的标签,并被百度、yahoo 等各大搜索引擎广泛支持,引用 nofollow
标签的目的是:用于指示搜索引擎不要追踪(即抓取)网页上的带有 nofollow 属性的任何出站链接,以减少垃圾链接的分散网站权重。
这里推荐 hexo-autonofollow
插件来解决。
安装:1
npm install hexo-autonofollow --save
配置:
在站点配置文件中添加以下代码:1
2
3
4
5nofollow:
enable: true
exclude: # 例外的链接,可将友情链接放置此处
- 你自己的站点地址
- 友链地址
搜索引擎收录
参考博客 百度录入
网站加速
Nginx gzip压缩
参考 Nginx gzip压缩
利用gulp压缩代码
参考 gulp压缩
修改默认Google字体库
对象存储存放图片资源
图床替换之后,可以通过sed
命令全局替换图片链接