共计 4523 个字符,预计需要花费 12 分钟才能阅读完成。
什么是 Hexo?
Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。
安装前提
安装 Hexo 相当简单,只需要先安装下列应用程序即可: + Node.js + Git
详细的环境安装过程可以访问 Hexo 文档
安装 Hexo & 初始化
所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。
npm install -g hexo-cli
对于熟悉 npm 的进阶用户,可以仅局部安装 hexo 包。
npm install hexo
局部安装 hexo
可在 package.json
配置 scripts
来运行 hexo
命令
安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。
hexo init <folder>
cd <folder>
npm install
hexo会自动下载一些文件到这个目录,包括node_modules,目录结构如下:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
| ├── _drafts
| └── _posts
└── themes
执行以下命令之后,hexo就会在 public
文件夹生成相关html文件,在部署的时候我们只需要把 public
下面的内容部署到服务器上就可以了
hexo g # 生成
hexo s # 启动服务
hexo s是开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到内容, 第一次初始化的时候hexo已经帮我们写了一篇名为 Hello World 的文章,默认的主题比较丑,打开时就是这个样子
其中有些我在安装过程中体会到的注意事项
- 很多命令既可以用Windows的cmd来完成,但有些支持在linux编辑比较好, 我自己是在完全的linux环境中进行编辑的
- hexo不同版本差别比较大,网上很多文章的配置信息都是基于2.x的,所以注意不要被误导
- hexo有2种
_config.yml
文件,一个是根目录下的全局的_config.yml
,一个是各个theme
下的
修改主题
既然默认主题很丑,那我们别的不做,首先来替换一个好看点的主题。这是 官方主题列表 列表中的主题一般都是放在 github
上, 可使用 git
下载下来. 个人比较喜欢这款 stun 主题, 下载这个主题:
git clone https://github.com/liuyib/hexo-theme-stun.git themes/stun
主题都统一放在 项目的 themes文件夹中 修改 项目中 _config.yml
的 theme: landscape
节点改为 theme: stun
,然后重新执行 hexo g
来重新生成。 如果出现一些莫名其妙的问题,可以先执行 hexo clean
来清理一下 public
的内容,然后再来重新生成和发布。
写博客
Hexo 有三种默认布局:post、page 和 draft。在创建这三种不同类型的文件时,它们将会被保存到不同的路径;而您自定义的其他布局和 post 相同,都将储存到 source/_posts 文件夹。
布局 | 路径 |
---|---|
post | source/_posts |
page | source |
draft | source/_drafts |
Hexo 默认以标题做为文件名称,但您可编辑 new_post_name
参数来改变默认的文件名称,举例来说,设为 :year-:month-:day-:title.md
可让您更方便的通过日期来管理文章。
变量 | 描述 |
---|---|
:title | 标题(小写,空格将会被替换为短杠) |
:year | 建立的年份,比如, 2015 |
:month | 建立的月份(有前导零),比如, 04 |
:i_month | 建立的月份(无前导零),比如, 4 |
:day | 建立的日期(有前导零),比如, 07 |
:i_day | 建立的日期(无前导零),比如, 7 |
草稿
Hexo 的一种特殊布局:draft,这种布局在建立时会被保存到 source/_drafts 文件夹,您可通过 publish 命令将草稿移动到 source/_posts 文件夹,该命令的使用方式与 new 十分类似,您也可在命令中指定 layout 来指定布局。
hexo new draft <title>
hexo publish <title>
草稿默认不会显示在页面中,您可在执行时加上 --draft
参数,或是把 render_drafts
参数设为 true 来预览草稿。
直接编写
定位到我们的hexo根目录,执行命令:hexo new 'my-first-blog'
hexo会帮我们在_posts下生成相关md文件, 我们只需要打开这个文件就可以开始写博客了,默认生成如下内容:
---
title: postName #文章页面上的显示名称,一般是中文
date: 2021-01-25 17:40:14 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格
description: 附加一段文章摘要,字数最好在140字以内,会出现在meta的description里面
---
以下是正文
生成页面
使用 hexo new page "my-second-blog"
命令, 生成如下:
---
title: my-second-blog
date: 2021-01-26 09:44:01
---
最终部署时生成:./public/my-second-blog/index.html,但是它不会作为文章出现在博文目录。而是作为一个页面直接显示在
如何让博文列表不显示全部内容
默认情况下,生成的博文目录会显示全部的文章内容,如何设置文章摘要的长度呢?
答案是在合适的位置加上 <!--more-->
即可,例如:
# 前言
使用github pages服务搭建博客的好处有:
1. 全是静态文件,访问速度快;
2. 免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台;
3. 可以随意绑定自己的域名,不仔细看的话根本看不出来你的网站是基于github的;
<!--more-->
4. 数据绝对安全,基于github的版本管理,想恢复到哪个历史版本都行;
5. 博客内容可以轻松打包、转移、发布到其它平台;
6. 等等;
部署
Hexo可部署在很多静态网页平台 支持 GitHub Pages, GitLab Pages, Heroku 等, 可参考 文档.
但这些部署方式在国内也存在一些问题
-
- 加载速度缓慢甚至无法访问, 虽然hexo生成的页面都比较小, 然而以上的部署方式已经在国内处于无法访问的状态.
-
- 可添加自定义域名, 加上国内的CDN进行加速解决上面的问题, 但是我在尝试过之后发现, 博客不可被百度索引.
-
- 如果使用自定义域名, 且域名已经备案的情况, 解析到上面的页面可能会导致域名备案信息被吊销的情况.
所以我的博客就放在国内的阿里云服务器上,用 docker build
发布, 当然这样也产生了一定的成本, 我也主要是想使用Hexo构建一个自己比较完善的博客.
doker 部署方式可参考以下 Dockerfile
, 放在根目录 执行 hexo clean && hexo generate
后再执行 docker build -t <name>
FROM nginx:alpine as run
COPY ./public /home/www/public
COPY ./nginx.conf /etc/nginx/nginx.conf
WORKDIR /home/www/public
CMD ["nginx", "-g", "daemon off;"]
在服务器部署中我采用 docker-compose
, 部分配置文件 服务器主要采用 nginx
### nginx.conf
worker_processes 2;
# ssl_engine device;
events {
worker_connections 1024;
}
http {
include mime.types;
default_type application/octet-stream;
server_tokens off;
access_log off;
sendfile on;
keepalive_timeout 65;
gzip on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_comp_level 9;
gzip_types text/javascript text/css text/xml image/jpeg image/png image/gif application/javascript application/json;
gzip_vary on;
gzip_proxied off;
server {
listen 80;
server_name nenufm.com;
rewrite ^(.*)$ https://nenufm.com permanent;
}
server {
listen 443 ssl http2;
server_name nenufm.com;
ssl_certificate /etc/nginx/sslcrt/5112744_nenufm.com.pem;
ssl_certificate_key /etc/nginx/sslcrt/5112744_nenufm.com.key;
ssl_session_timeout 5m;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_ciphers AESGCM:ALL:!DH:!EXPORT:!RC4:+HIGH:!MEDIUM:!LOW:!aNULL:!eNULL;
ssl_prefer_server_ciphers on;
location / {
proxy_pass http://hexo-blog;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
}
### docker-compose
version: '3.1'
services:
hexo-blog:
container_name: server_hexo_blog
restart: always
image: <my hub>/hexo-blog:latest
niginx:
container_name: server_niginx
tty: true
image: nginx:latest
restart: always
ports:
- '443:443'
- '80:80'
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf
- ./nginx/sslcrt/:/etc/nginx/sslcrt/
environment:
TZ : 'Asia/Shanghai'
depends_on:
- hexo-blog