使用hexo搭建个人博客

使用hexo搭建个人博客

什么是 Hexo?

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页。

安装

博主个人使用的是阿里云的服务器,学生机,使用的是centos8.2的操作系统。购买服务器之后,ssh连接我们的服务器。

apt update         #更新服务器的软件仓库
apt upgrade -y     #更新软件
reboot             #重启服务器

更新完成之后就首先要安装git

安装 Git

apt install git-core #安装git

安装完成之后还需要安装node.js

安装 Node.js

Node.js官网

http://nodejs.cn/download/

为了方便,我们直接下载二进制版本。这样就省去了编译安装步骤。

下载完成之后,上传到我们的服务器上,我上传到服务器的/opt目录下

cd /opt                  #进入到opt文件夹下
tar xf node-v14.15.4-linux-x64.tar.xz  #解压下载的node安装包
mv node-v14.15.4-linux-x64 node     #将原来的文件夹名称改为node
ln -s /opt/node/bin/node /usr/local/bin/node #创建软连接使node命令在全局生效
ln -s /opt/node/bin/npm  /usr/local/bin/npm #创建软连接使npm命令在全局生效
node -v  #查看软连接是否生效,并且查看node 的版本

安装 Hexo

使用淘宝镜像可以加速

npm config set disturl https://npm.taobao.org/dist

所有必备的应用程序安装完成后,即可使用 npm 安装 Hexo。

npm install -g hexo-cli

静静等待安装完成

Hexo使用

 ln -s /opt/node/lib/node_modules/hexo-cli/bin/hexo /usr/local/bin/hexo

建站

安装 Hexo 完成后,请执行下列命令,Hexo 将会在指定文件夹中新建所需要的文件。

$ hexo init 目录名  #生成hexo的目录
$ cd 目录

新建完成后,指定文件夹的目录如下:

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

_config.yml

网站的 配置 信息,您可以在此配置大部分的参数。

scaffolds

模版 文件夹。当您新建文章时,Hexo 会根据 scaffold 来建立文件。

Hexo的模板是指在新建的文章文件中默认填充的内容。例如,如果您修改scaffold/post.md中的Front-matter内容,那么每次新建一篇文章时都会包含这个修改。

source

资源文件夹是存放用户资源的地方。除 _posts 文件夹之外,开头命名为 _ (下划线)的文件 / 文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到 public 文件夹,而其他文件会被拷贝过去。

themes

主题 文件夹。Hexo 会根据主题来生成静态页面。

配置

您可以在 _config.yml 中修改大部分的配置。

网站

参数 描述
title 网站标题
subtitle 网站副标题
description 网站描述
keywords 网站的关键词。支援多个关键词。
author 您的名字
language 网站使用的语言。对于简体中文用户来说,使用不同的主题可能需要设置成不同的值,请参考你的主题的文档自行设置,常见的有 zh-Hanszh-CN
timezone 网站时区。Hexo 默认使用您电脑的时区。请参考 时区列表 进行设置,如 America/New_York, Japan, 和 UTC 。一般的,对于中国大陆地区可以使用 Asia/Shanghai

其中,description主要用于SEO,告诉搜索引擎一个关于您站点的简单描述,通常建议在其中包含您网站的关键词。author参数用于主题显示文章的作者。

网址

参数 描述 默认值
url 网址, must starts with http:// or https://
root 网站根目录
permalink 文章的 永久链接 格式 :year/:month/:day/:title/
permalink_defaults 永久链接中各部分的默认值
pretty_urls 改写 permalink 的值来美化 URL
pretty_urls.trailing_index 是否在永久链接中保留尾部的 index.html,设置为 false 时去除 true
pretty_urls.trailing_html 是否在永久链接中保留尾部的 .html, 设置为 false 时去除 (对尾部的 index.html无效) true

网站存放在子目录

如果您的网站存放在子目录中,例如 http://example.com/blog,则请将您的 url 设为 http://example.com/blog 并把 root 设为 /blog/

例如:

# 比如,一个页面的永久链接是 http://example.com/foo/bar/index.html
pretty_urls:
  trailing_index: false
# 此时页面的永久链接会变为 http://example.com/foo/bar/

目录

参数 描述 默认值
source_dir 资源文件夹,这个文件夹用来存放内容。 source
public_dir 公共文件夹,这个文件夹用于存放生成的站点文件。 public
tag_dir 标签文件夹 tags
archive_dir 归档文件夹 archives
category_dir 分类文件夹 categories
code_dir Include code 文件夹,source_dir 下的子目录 downloads/code
i18n_dir 国际化(i18n)文件夹 :lang
skip_render 跳过指定文件的渲染。匹配到的文件将会被不做改动地复制到 public 目录中。您可使用 glob 表达式来匹配路径。

例如:

skip_render: "mypage/**/*"
# 将会直接将 `source/mypage/index.html` 和 `source/mypage/code.js` 不做改动地输出到 'public' 目录
# 你也可以用这种方法来跳过对指定文章文件的渲染
skip_render: "_posts/test-post.md"
# 这将会忽略对 'test-post.md' 的渲染

提示

如果您刚刚开始接触 Hexo,通常没有必要修改这一部分的值。

文章

参数 描述 默认值
new_post_name 新文章的文件名称 :title.md
default_layout 预设布局 post
auto_spacing 在中文和英文之间加入空格 false
titlecase 把标题转换为 title case false
external_link 在新标签中打开链接 true
external_link.enable 在新标签中打开链接 true
external_link.field 对整个网站(site)生效或仅对文章(post)生效 site
external_link.exclude 需要排除的域名。主域名和子域名如 www 需分别配置 []
filename_case 把文件名称转换为 (1) 小写或 (2) 大写 0
render_drafts 显示草稿 false
post_asset_folder 启动 Asset 文件夹 false
relative_link 把链接改为与根目录的相对位址 false
future 显示未来的文章 true
highlight 代码块的设置, see Highlight.js section for usage guide
prismjs 代码块的设置, see PrismJS section for usage guide

相对地址

默认情况下,Hexo 生成的超链接都是绝对地址。例如,如果您的网站域名为 example.com,您有一篇文章名为 hello,那么绝对链接可能像这样:http://example.com/hello.html,它是绝对于域名的。相对链接像这样:/hello.html,也就是说,无论用什么域名访问该站点,都没有关系,这在进行反向代理时可能用到。通常情况下,建议使用绝对地址。

分类 & 标签

参数 描述 默认值
default_category 默认分类 uncategorized
category_map 分类别名
tag_map 标签别名

日期 / 时间格式

Hexo 使用 Moment.js 来解析和显示时间。

参数 描述 默认值
date_format 日期格式 YYYY-MM-DD
time_format 时间格式 HH:mm:ss
updated_option 当 Front Matter 中没有指定 updatedupdated 的取值 mtime

updated_option

updated_option 控制了当 Front Matter 中没有指定 updated 时,updated 如何取值:

  • mtime: 使用文件的最后修改时间。这是从 Hexo 3.0.0 开始的默认行为。
  • date: 使用 date 作为 updated 的值。可被用于 Git 工作流之中,因为使用 Git 管理站点时,文件的最后修改日期常常会发生改变
  • empty: 直接删除 updated。使用这一选项可能会导致大部分主题和插件无法正常工作。

use_date_for_updated 选项已经被废弃,将会在下个重大版本发布时去除。请改为使用 updated_option: 'date'

use_date_for_updated` | 启用以后,如果 Front Matter 中没有指定 `updated`, [`post.updated`](https://hexo.io/zh-cn/docs/configuration) 将会使用 `date` 的值而不是文件的创建时间。在 Git 工作流中这个选项会很有用 | `true

分页

参数 描述 默认值
per_page 每页显示的文章量 (0 = 关闭分页功能) 10
pagination_dir 分页目录 page

扩展

参数 描述
theme 当前主题名称。值为false时禁用主题
theme_config 主题的配置文件。在这里放置的配置会覆盖主题目录下的 _config.yml 中的配置
deploy 部署部分的设置
meta_generator Meta generator 标签。 值为 false 时 Hexo 不会在头部插入该标签

了解了这些,就可以去下载你喜欢的主题,配置你自己的网站了

博主使用的3-hexo主题模板,github地址如下

https://github.com/yelog/hexo-theme-3-hexo
git clone https://github.com.cnpmjs.org/yelog/hexo-theme-3-hexo theme/3-hexo #通过github的镜像站下载,速度更快

然后就根据上面得配置,修改你自己的hexo的_config.yml吧

然后就是修改主题的_config.yml了

关掉 hexo 自带的代码高亮

主题内置了主题高亮,所以需要禁用 hexo 自带的高亮

highlight:
    enable: false

开启关于页面

hexo new page "about"
  1. 位置: source/aoubt/index.md ,根据需要进行编辑。

  2. 在主题中开启显示:修改主题根目录_config.yml中的 about on 为 true

    ,如下所示

    menu:
    about:  # '关于' 按钮
     on: true # 是否显示
     url: /about  # 跳转链接
     type: 1 # 跳转类型 1:站内异步跳转 2:当前页面跳转 3:打开新的tab页
    

更新首页

首页文件位置 /layout/indexs.md 首页也是markdown的格式

代码高亮

首先要关闭hexo根目录下_config.yml中的高亮设置:

highlight:
  enable: false

配置主题下_config.yml中的高亮设置:
可以根据提示,配置喜欢的高亮主题

highlight:
  on: true # true开启代码高亮
  lineNum: true # true显示行号
  theme: darcula
# 代码高亮主题,效果可以查看 https://highlightjs.org/static/demo/
# 支持主题:
# sublime : 参考sublime的高亮主题
# darcula : 参考idea中的darcula的主题
# atom-dark : 参考Atom的dark主题
# atom-light : 参考Atom的light主题
# github : 参考GitHub版的高亮主题
# github-gist : GitHub-Gist主题
# brown-paper : 牛皮纸效果
# gruvbox-light : gruvbox的light主题
# gruvbox-dark : gruvbox的dark主题
# rainbow :
# railscasts :
# sunburst :
# kimbie-dark :
# kimbie-light :
# school-book : 纸张效果

开启字数统计

  1. 开启此功能需先安装插件,在 hexo根目录 执行 npm i hexo-wordcount --save
  2. 修改 _config.yml
word_count: true

更换头像

两种方式:

  1. 替换 source/img/avatar.jpg 图片。
  2. 修改 _config.yml 中头像的配置记录
# 你的头像url
avatar: /img/avatar.jpg
favicon: /img/avatar.jpg

分类排序

默认按照首字母正序排序,由于中文在 nodejs 环境下不能按照拼音首字母排序,所以添加了自定义排序方式,在主题下 _config.yml 中找到如下配置,category.sort则是定义分类顺序的。

规则:sort中定义的 category 比 没有在 sort 中定义的更靠前

# 文章分类设置
category:
  num: true # 分类显示文章数
  sub: true # 开启多级分类
  sort:
    - linux
    - 云计算
    - 路由与交换
    - 数据库
    - 运维
    - python

文章排序

文章列表默认按照创建时间(如下文章内定义的date)倒序。

使用 top 将会置顶文章,多个置顶文章时,top 定义的值越大,越靠前。

---
title: 每天一个linux命令
date: 2017-01-23 11:41:48
top: 1
categories:
- 运维
tags:
- linux命令
---yml

写文章

每篇文章最好写上文集和标签,方便筛选和查看。
一般推荐一篇文章设置一个文集,一个或多个标签
categories:文集,为左侧列表
tags:标签,通过#来筛选
例如 本篇文章的设置

---
title: 3-hexo使用说明
date: 2017-03-23 15:13:47
categories:
- 工具
tags:
- hexo
- 3-hexo
---

写作

1.设置模板,blog根目录 scaffolds/post.md
加入categories,tags等,这样以后通过 hexo new 生成的模板就不用写这两个单词了。
当然,你也可以写入任何你每个文章中都会有的部分。

---
title: {{ title }}
date: {{ date }}
categories:
tags:
---

使用nginx访问hexo生成的静态页

Nginx 是一个很强大的高性能Web和反向代理服务器,博主通过nginx访问hexo生成的静态页

apt install nginx -y   #安装nginx
cd /etc/nginx/sites-enabled      #进入nginx的配置文件夹
cp  default www.lzcwy.cn.conf  #将网站配置文件复制到我们创建的目录下
vim www.lzcwy.cn.conf  #编辑配置文件

保留如下配置文件内容

server {
        listen       80 default_server;
        listen       [::]:80 default_server;
        server_name  www.lzcwy.cn lzcwy.cn;       #你的服务器名称
        root         /www/www.lzcwy.cn/public;    #hexo的静态页根目录

        # Load configuration files for the default server block.
        include /etc/nginx/default.d/*.conf;

        location / {
        }

        error_page 404 /404.html;
            location = /40x.html {
        }

        error_page 500 502 503 504 /50x.html;
            location = /50x.html {
        }
}

# Settings for a TLS enabled server.
#
#    server {
#        listen       443 ssl http2 default_server;
#        listen       [::]:443 ssl http2 default_server;
#        server_name  _;
#        root         /usr/share/nginx/html;
#
#        ssl_certificate "/etc/pki/nginx/server.crt";
#        ssl_certificate_key "/etc/pki/nginx/private/server.key";
#        ssl_session_cache shared:SSL:1m;
#        ssl_session_timeout  10m;
#        ssl_ciphers PROFILE=SYSTEM;
#        ssl_prefer_server_ciphers on;
#
#        # Load configuration files for the default server block.
#        include /etc/nginx/default.d/*.conf;
#
#        location / {
#        }
#
#        error_page 404 /404.html;
#            location = /40x.html {
#        }
#
#        error_page 500 502 503 504 /50x.html;
#            location = /50x.html {
#        }
#    }

systemctl restart nginx #重启nginx服务

然后访问你的域名就可以访问到hexo生成的静态页了


文章内容仅用于作者学习使用,如果内容侵犯您的权益,请立即联系作者删除,作者不承担任何法律责任。

×

喜欢就点赞,疼爱就打赏