我的博客网站建立日志

发表于 | 分类于

简易指南

增加博客简易指南

  1. 在md文档增加文件头
    1
    2
    3
    4
    5
    ---
    title: termux使用笔记
    date: 2023-07-30 21:11:37
    	categories: Linux/3D打印/Linux/Python/前端/杂谈
    ---
  2. 增加<!--more-->

上传

  1. hexo s // 预览
  2. hexo g // 编译
  3. hexo d // 发布

利用GITHUB托管静态网站

  1. 创建仓库
    1. 名字<你的GitHub用户名>.GitHub.io
    2. 选择公开
    3. 选一个证书，这次用的是BSD-2-Clause license
  2. 在本地git clone 仓库
  3. 新建一个index.html 文件作为主页。
  4. 提交代码到仓库

在一个GitHub账户托管多个网页

  1. 新建Github仓库可以随意命名
  2. 找到”Settings”选项卡，向下滚动到”GitHub Pages”部分。
    在”GitHub Pages”部分，选择主分支（通常为main或master）作为源码。

Hexo的配置

配置HEXO

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
1. 安装node.js 
# 检查安装是否成功
$ node -v
$ npm -v

2. 更换下载源（提高下载速度）
$ npm config set registry https://registry.npm.taobao.org

# 1、安装 hexo
$ npm install -g hexo-cli

# 2、新建工作目录，存放hexo的配置文件、主题、博客（自己写的）等
$ mkdir blog
$ cd blog

# 3、初始化hexo环境(必须进入一个空目录进行初始化！)
$ hexo init

4. 生成本地页面
hexo s

5. 安装git插件
npm install hexo-deployer-git --save

6. 然后在项目文件夹根目录中，找到_config.yml文件，修改末尾的deploy为如下：
# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: git@github.com:Cheng5696/Cheng5696.github.io.git
  branch: master

7. 上传页面到github
hexo d   // GitHub上上传的仅仅是public目录下的文件

创建文章

1
2
3
4
5
6
7
1. hexo new [layout] <title>

2. 直接在source/_drafts新建草稿文章，在source/_posts新建发布文章
在文章顶部加上相关的描述
title: new 命令中输入的 title
date: 2019-03-14 17:38:41

选择布局

1
2
3
4
post	source/_posts，默认title即是文件名
page	source，默认title是文件夹名，文件名为index.md
draft	source/_drafts，默认title即是文件名
自定义的其他布局和post相同，都将储存到 source/_posts

添加图片

1
2
1. 在source/images文件夹内存放图片
2. 利用 ![image](xxx.png)加载图片

模版 scaffolds

在新建文章时，Hexo 会根据scaffolds文件夹内相对应的文件来建立文件

1
hexo new abc "My Gallery"   //在scaffolds 文件夹中寻找 abc.md模板

分类和标签

只有文章支持分类和标签，可以在 Front-matter 中设置。
分类具有顺序和层次性
标签没有顺序和层次。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
1. hexo new page categories  // 生成分类页面
   hexo new page tags        // 生成标签页面

2. \source\categories\index.md
	---
	title: 分类
	date: 2023-07-30 21:01:35
	type: categories 
	---

3. 打开\source\tags\index.md
	---
	title: 标签
	date: 2023-07-30 21:05:46
	type: tags
	---

4. \themes\next\_config.yml  // 打开主题设置页面，将tags,categories取消注释
	# ---------------------------------------------------------------
	# Menu Settings
	# ---------------------------------------------------------------

	# When running the site in a subdirectory (e.g. domain.tld/blog), remove the leading slash (/archives -> archives)
	menu:
	  home: /
	  categories: /categories/
	  about: /about/
	  archives: /archives/
	  tags: /tags/
	  
5. 在文章头部添加标签和分类文章
	---
	title: termux使用笔记
	date: 2023-07-30 21:11:37
	categories: Linux
	tags: termux
	---

主题

1
2
3
4
5
在 themes 文件夹内，新增一个任意名称的文件夹，并修改 _config.yml 内的 theme 设定，即可切换主题

hexo更换主题后报错（页面报错：{% extends '_layout.swig' %}） 
原因：hexo缺少了一个包（swig）。
在hexo博客根目录下打开终端 npm i hexo-renderer-swig

添加我自己的域名

  1. 购买域名
  2. 设置域名解析
    记录类型：CNAME
    记录值：cheng5696.github.io
    ttl：600s
  3. 进入Github项目的设置页面，下拉找到页面设置。Custom domain 输入chengcheng.xyz
  4. 在博客文件的source目录中创建一个名为CNAME文件，不要后缀，写上自定义的域名
  5. 重新部署

    hexo clean
    hexo s // 预览
    hexo g // 编译
    hexo d // 发布

更改主题语言

打开Blog/_config.yml

language: zh-Hans // 更改语言

增加关于页面

1. hexo new page "about"   //新建一个页面。  
2. 修改 E:\Blog\themes\next下的_config.yml文件

1
2
3
4
5
menu:
home: /
categories: /categories/
about: /about/

更改头像

1. 打开 E:\Blog\themes\next\source\images,将头像复制进去重命名为avatar.jpg
2. 修改 E:\Blog\themes\next下的_config.yml文件

1
2
3
4
# Sidebar Avatar
# in theme directory(source/images): /images/avatar.jpg
# in site  directory(source/uploads): /uploads/avatar.jpg
avatar: /images/avatar.jpg

更改网页最下面版权声明

打开E:\Blog\themes\next\layout\_partials 的footer.swig，按格式更改内容

1
2
3
4
5
6
7
8
9
10
11
{% if theme.copyright %}
<div class="powered-by">
  {{ __('footer.powered', '<a class="theme-link" href="https://chengcheng.xyz/about/">CC</a>') }}
</div>

<div class="theme-info">
  <a class="theme-link" href="https://chengcheng.xyz/about/">
    mr.chuangshi@gmail.com
  </a>
</div>
{% endif %}

首页隐藏部分内容

参考

  1. 修改Next主题的_config.yml配置文件
    1
    2
    # Automatically excerpt description in homepage as preamble text.
    excerpt_description: true
  2. 在md文档中使用<!--more-->，隐藏接下来的所有内容

更改弹出的hexo名字

在Hexo Next主题中，弹出的Hexo名称通常是在网站配置文件中设置的。你需要编辑你站点的 _config.yml 文件来更改这个名称。

  1. 打开你站点的根目录下的 _config.yml 文件。
  2. 找到 title 字段，这个字段用于设置网站作者的信息。

使用单个文件夹分开存图片

  1. 修改hexo文件夹中的_config.yml文件
1
2
3
4
post_asset_folder: true
marked:
  prependRoot: true
  postAsset: true
  1. 在D:\Blog\source\_posts文件夹内新建md文件和同名的文件夹存图片
  2. 引用图片 ![图片](1.jpeg)

在使用HEXO时踩的一些坑

文章里出现大括号

1
2
生成本地页面时，报错Error: template not found: _layout.swig
因为文章里出现了不在代码块里的{},将出现的地方用```  ```包起来

使用hexo d 发布时，报错 directory not empty, rmdir ‘E:\Blog.deploy_git\hexo-theme-next-master’

解决方法：将E:\Blog.deploy_git\hexo-theme-next-master下的文件都删除

hexo generateThumb fail xxx.jpg

删除D:\Blog\source\images文件夹
使用单个文件夹分开存图片时，将之前的放图片的文件夹删除

图片加载不出来

试一下 hexo clean
然后hexo s