如何创建属于自己的博客

发表于2022-05-12更新于2022-05-13阅读时长16分阅读次数

一篇关于如何使用hexo搭建个人博客的硬核技术文，笔者觉得可以读完就会

tips：文中所有的蓝字都是可以直接点进去的超链接

前言

序言

本人在今年冬天受KHLFYY邀请共同开发VGTB的博客（链接在友链中），当时对页面设计一窍不通的我本来准备拿HTML直接开始暴写，还好KH推荐给我hexo这个简单的个人博客生成器，从此开始了对这个博客引擎的研究。hexo通过一些简单的指令即可快速创建个性化网页，所以准备把这个引擎推荐给大家，让各位体验一次创造网页的感觉

准备

hexo运行依赖（附有详细安装教程）：

需要准备的一些内容（配上详细教程）

  • 编写博文使用MarkDown语言，学习起来非常简单，可能之后还会写新的傻瓜式教程
  • 一种代码编辑器，本人推荐Visual Studio Code，以后也会出一些插件推荐

正文

创建博客文件

首先我们要选一个文件夹用于存放我们的博客文件，只要方便自己找到就好

然后，在文件夹中空白处右键选择Git Bash Here

如果你用的是Windows 11，那么请参考如下图片寻找

Win11请选择显示更多选项
然后再选择Git Bash Here

如果你的电脑是Windows 10或更老版本，直接在右键菜单（如图二）中就能找到Git Bash Here

然后会出现这样一个界面
Git Bash

会出现一行字，绿色部分是你电脑的名字（隐私问题已经码掉），红色部分不用管，黄色部分要确保是你存放博客的文件夹

如果黄色部分不是博客的目录，请在Git Bash中输入如下内容：

cd <folder>

其中<folder>代表博客文件夹路径，例如：

cd /d/Website

在确定目录之后，输入

npm install -g hexo-cli

安装hexo，随后输入

hexo init

稍等片刻，你会看到文件夹中出现了一些文件

过程中可能会有错误信息报出，可以忽略

完成后输入

hexo server

或简写为

hexo s

在出现

INFO  Hexo is running at http://localhost:4000 . Press Ctrl+C to stop

这样一行字之后，在浏览器地址栏输入localhost:4000就可以看到自己的博客了

博客文件分析

在进行前面的操作后，如果一切正常，你已经拥有了自己的博客

为了对博客进行进一步的个性化设计，各位需要对博客文件有一个粗浅的了解

文件内容

图片为本博客的文件，黄色部分为需要了解的内容，蓝色部分为主题配置文件，安装主题后会出现，此处不讨论

config.yml

博客的总配置文件，其中可以调整博客的核心内容，会在后文选择其中一部分分析

source文件夹

博客存放各类资源文件的地方，一般情况下存放的是博文和页面内容

source文件夹内容

其中标黄的_posts存放博客中的博文内容，其余部分属于个性化添加内容，在后文讨论

themes文件夹

博客存放主题文件的地方，一般不需对其操作，每次安装的主题都会在这里找到

撰写文章

hexo的博文基于MarkDown语法进行编写，所以较为流畅的使用MarkDown基础语法很重要

首先我们需要创建博文文件，在Git Bash中输入

hexo new <title>

<title>处填写文章名称（支持中文），也可后期修改，例如：

hexo new 我的第一篇文章

随后前往博客目录下/source/_post文件夹中，就可以找到对应的.md文件

打开.md文件，可以看到如下内容：

---
title: xxxx
date: xxxx
---

title对应此文章的标题，date为文件创建日期

可以在这里添加各种个性化配置项，具体请参考主题说明文档

在下面可以自己编写内容

如果想为博客编写摘要内容，可以在文章开头先写摘要，随后用

<!-- more -->

与正文分开

本文开头

上图为本文的开头部分内容，作为样例提供参考

发布文章

作为一个网站，我们首先需要一个服务器托管，个人比较推荐Github的托管，优点在于可以全天候在线而且免费，缺点在于网页不支持中文，访问有时比较困难，而且上传文件大小有限制，但对于我们的网站来说足够了

Github注册

首先我们要注册一个Github账号，前往Github注册

然后进入Github并选择左上角的New创建新仓库

创建仓库

创建仓库页

如图，在Repository Name中填写仓库名，若需要托管仓库名需要在结尾添加*.github.io*

经本人测试如果将仓库名修改为username.github.io，那么访问网站为username.github.io，
否则访问网站为username.github.io/reponame.github.io，
建议以自己的用户名作为仓库名并在结尾加上*.github.io*

这样我们就有了一个代码仓库，随后我们要将文件上传到仓库中

注意：博客文件夹中的文件需要经hexo处理之后才能变为浏览器可识别的文件，所以不能直接上传源文件

GitHub识别

为了确保GitHub中每位用户的文件不被恶意篡改，GitHub采用了SSH识别方式验证身份，所以我们要将自己的电脑通过SSH密钥与GitHub建立连接

来到GitHub首页，在右上角进入设置

GitHub设置

选择SSH and GPG keys并选择右上角的New SSH key

SSH Key

随后回到Git Bash，输入如下指令：

git config --global user.name "yourname"
git config --global user.email "youremail"

此处yourname代表GitHub账号用户名，youremail代表注册Github所用的邮箱，例如：

git config --global user.name "CoderLiuChina"

注意引号不可省略

可以使用

git config user.name
git config user.email

检查一下有没有写错的地方

确认无误后输入：

ssh-keygen -t rsa -C "youremail" 

此处youremail同上代换

接下来Git会有一些询问，忽略它们，直接回车即可

最后Git会告诉你已经生成完成，在电脑中找到此文件

一般位于C://Users/“username”/.ssh

在这个文件夹中会有如下文件：

  • id_rsa
  • id_rsa.pub
  • known_hosts

其中id_rsa（不含.pub）是个人密钥，一定不能泄露

id_rsa.pub是公共密钥，可以随便给人看

将id_rsa.pub文件中的所有内容复制到先前打开的GitHub添加密钥界面

添加ssh

在Title栏中填一个名字，在Key栏复制粘贴id_rsa.pub中所有内容

最后选择Add SSH key即可

检验是否添加成功可以通过在Git中输入

ssh -T git@github.com

注意反馈信息，若存在错误信息请自行上网查找有关内容

GitHub上传

完成上文操作后我们就可以将博客上传至GitHub保存了

首先打开博客根目录的config.yml（前文有提到）

翻到文件末尾，将deploy项修改为：

deploy:
  type: git
  repo: https://github.com/yourname/yourname.github.io.git
  branch: master

此处yourname代表你的GitHub用户名

随后在Git Bash中安装上传插件，输入：

npm install hexo-deployer-git --save

然后依次输入以下三条：

hexo clean
hexo generate
hexo deploy

或简写为

hexo cl
hexo g
hexo d

其中clean清除了先前的站点缓存，可以避免很多问题

generate生成网站的一些具体文件

deploy向GitHub上传你的网站

注意第一次使用此账号deploy时可能要求你输入账号密码，输入一次后直到你在这台电脑上更换账号之前都不会再要求输入

这样你就可以前往yourname.github.io欣赏自己的博客了！

个性化

进行上文操作之后你就可以在浏览器地址栏中输入你的仓库名来访问你的网站了

如果你觉得自己的网站主题不够漂亮，可以前往Hexo官网自己寻找适合的主题，根据主题的说明文档自己装点自己的网站了

接下来本文将带你了解config.yml中一些基础项

打开config.yml，在文件开头可以找到如下内容

# Site
title: 
subtitle: 
description: 
keywords:
author: 
language: 
timezone:

这段内容有关网站信息

title是网站标题，自行命名即可

subtitle是网站副标题，如果对网页不够了解可以不填

description是网站描述，也可以不填

keywords是网站关键字，与搜索引擎（比如百度）筛选搜索结果有关，可以不填

author是作者，自行起名即可

language有关网站生成使用的语言，使用中文填写zh-CN

timezone有关网站生成使用的时区信息，使用北京时间填写Asia/Shanghai

在此段文字下方还有如下内容：

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: 
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
  trailing_html: true # Set to false to remove trailing '.html' from permalinks

这段内容有关网站网址

只建议修改url项，改为自己的网站

再往下还有：

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
  enable: true # Open external links in new tab
  field: site # Apply to the whole site
  exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: false
  auto_detect: false
  tab_replace: ''
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  tab_replace: ''

有关网站生成内容，不建议做修改

下翻到结尾处有如下项：

theme:

这里填写网站使用的主题，一般在主题的说明文档都会提及

结尾

Hexo操作简单易上手，据本人估测从零开始学习并搭建网站可能用不上四个小时，如果熟练起来可以在几十分钟内完成一个网站的搭建。笔者认为这个引擎相比网上常见的CSDN或者LOFTER更为自由也更为强大，所以把它写成教程贴出来。关于我的第一个Hexo网站可以前往友链中“VGTB官方博客”查看。相信各位看完这篇文章也一定能快速上手学会这个简单实用的引擎

临近高考季，祝高三学长们学业有成，金榜题名！

版权声明：本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！