抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

博客搭建流程（0基础开始向）

博客搭建

发布于：2022年12月28日

博客搭建流程（0基础开始向）

（使用GitHub+Hexo）

一、注册GitHub

1.访问GitHub

访问GitHub方法：

1.访问http://www.github.com.ipaddress.com/，查看GitHub的IP地址

2.找到C:\windows\System32\drivers\etc\host文件，在最后添加新的一行，内容为GitHub的IP地址和网址，中间用空格分开，如下，保存好

1
2
140.82.112.4 github.com
140.82.112.4 www.github.com

3.打开终端，输入如下指令刷新配置

1
ipconfig /flushdns

image-20220318111619522

二、安装Git（我安的2.35）

原参考知乎安装教程：个人博客第2篇——Git 2.25.0详细安装步骤 - 知乎 (zhihu.com)

git官网：Git (git-scm.com)

三、绑定GitHub并提交文件

GitHub上可以直接提交文件，远程仓库与本地仓库可以通过SSH协议或者HTTPS协议这两种方式连接，我们这里用SSH来完成GitHub的绑定并提交文件

SSH（安全外壳协议，Secure Shell 的缩写）是建立在应用层基础上的安全协议。SSH 是目前较可靠，专为远程登录会话和其他网络服务提供安全性的协议，利用 SSH 协议可以有效防止远程管理过程中的信息泄露问题。简单来说，SSH就是保障你的账户安全，将你的数据加密压缩，不仅防止其他人截获你的数据，还能加快传输速度。

1.绑定GitHub

打开GitBashHere，用【ssh-keygen -trsa】命令在本机生成公钥(id_rsa.pub)和密钥(id_rsa)，将公钥的文本内容复制到GitHub网站里我的SSHKey里面。（默认公钥密钥生成路径为：C:\Users\用户名\.ssh\id_rsa.pub）

注：git里面的复制粘贴是Ctrl+ Insert 和 Shift+ Insert

如下图所示，打开你的GitHub👉右上角小头像展开👉Settings👉SSH and GPG keys👉new key👉输入Title(可不填)和Key👉Add SSH key

画板 1 
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
23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace
$ ssh
usage: ssh [-46AaCfGgKkMNnqsTtVvXxYy] [-B bind_interface]
           [-b bind_address] [-c cipher_spec] [-D [bind_address:]port]
           [-E log_file] [-e escape_char] [-F configfile] [-I pkcs11]
           [-i identity_file] [-J [user@]host[:port]] [-L address]
           [-l login_name] [-m mac_spec] [-O ctl_cmd] [-o option] [-p port]
           [-Q query_option] [-R address] [-S ctl_path] [-W host:port]
           [-w local_tun[:remote_tun]] destination [command [argument ...]]

23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace
$ ssh-keygen -trsa
Generating public/private rsa key pair.
Enter file in which to save the key (/c/Users/23163/.ssh/id_rsa):
Created directory '/c/Users/23163/.ssh'.
Enter passphrase (empty for no passphrase):
Enter same passphrase again:
Your identification has been saved in /c/Users/23163/.ssh/id_rsa	//这是生成密钥的位置
Your public key has been saved in /c/Users/23163/.ssh/id_rsa.pub	//这是生成公钥的位置
The key fingerprint is:
SHA256:OQnGcnRhMElRNcl1cYYVEpjiwyTZvQpLc8+wr6DvKB0 23163@▒ҵĶ▒▒ӽ▒▒▒▒▒
The key's randomart image is:
+---[RSA 3072]----+
|     .*=B++o+o+==|
|     o.* +o= .oo |
|    . = = . .    |
|     + = O .     |
|      . S B      |
|     E . + o     |
|    . ..  .      |
|   . .o .  .     |
|    .ooo ..      |
+----[SHA256]-----+

23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace
$
image-20220318092155422

验证是否成功：

1
ssh -T git@github.com

打入yes回车：

1
2
3
4
5
6
7
8
9
10
11
12

23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace
$ ssh -T git@github.com
The authenticity of host 'github.com (20.205.243.166)' can't be established.
ED25519 key fingerprint is SHA256:+DiY3wvvV6TuJJhbpZisF/zLDA0zPMSvHdkr4UvCOqU.
This key is not known by any other names
Are you sure you want to continue connecting (yes/no/[fingerprint])? yes
Warning: Permanently added 'github.com' (ED25519) to the list of known hosts.
Hi KQ2316336903! You've successfully authenticated, but GitHub does not provide shell access.

23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace
$

2.提交文件

（1）本地没有git仓库

①直接将远程仓库克隆到本地
image-20220322083459479

在准备储存仓库的目录下GitBashHere，输入指令【git clone 刚刚复制的仓库地址】

1
2
23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace/myRepository01/myRepository01 (main)
$ git clone https://github.com/KQ2316336903/myRepository01.git

打开仓库存储目录检查是否与远程仓库一致

②将新建的文件添加并commit到本地仓库
1
2
git add <fileName>		//将某文件添加到临时缓冲区/暂存区，若有多个文件，则文件名中间用空格分隔开即可！
git commit -m "这里自己填写对于本次提交修改的备注内容"		//将文件提交到本地仓库

如果是第一次提交会让你输入用户名和邮箱，按如下格式添加即可：

1
2
git config --global user.name "自己的GitHub用户名"
git config --global user.email "账号绑定的邮箱地址"		//(注意空格！！)

其他指令

1
2
git log		//查看仓库提交日志
git status	//查看仓库状态
③将本地仓库的内容push到远程仓库

最后将本地仓库提交到远程仓库：

1
git push origin master	//这里的master在后来的git版本中是main，所以需注意跟自己gitbash窗口中保持一致即可

第一次会弹出这个账户认证窗口

image-20220322110800150

点击登录，会跳转到默认浏览器里，输入账户密码登录后，跟着步骤确认就行了，GitBash窗口会在操作完成后自动push的。

（2）本地有git仓库，并且我们已进行了多次commit操作

①建立本地仓库

建立仓库文件夹，在这个文件夹内GitBashHere，使用git init命令创建/初始化这个仓库

1
2
3
4
5
6
23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace/myRepository01/demo01
$ git init
Initialized empty Git repository in H:/GitWorkSpace/myRepository01/demo01/.git/

23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace/myRepository01/demo01 (master)
$
②关联远程仓库
1
2
3
4
5
6
7
$ git remote add origin https://github.com/KQ2316336903/myRepository01.git
23163@▒ҵĶ▒▒ӽ▒▒▒▒▒ MINGW64 /h/GitWorkSpace/myRepository01/demo01 (master)

//对于新建的仓库，执行以下命令后的报错忽略不计
$ git pull origin master
fatal: couldn't find remote ref master

（3）总结：

先绑定本地仓库，将远程仓库文件同步到本地（git clone和git pull），然后后续有了文件变化时将本地变化git push到远程仓库。

  • 一次性git add多个文件（夹）：

    1
    2
    3
    4
    5
    git add .		//提交所有被修改和新建的文件，但不包括被删除的文件

    git add -a		//all，提交所有已被修改和删除的文件，但不包括新建文件

    git add -u		//update，更新/提交所有已改变的文件

3.其他配置

①删除本地仓库

删除Git本地仓库的根本原理是删除“Git本地仓库”⾥⾯的根⽬录下⾯的隐藏⽂件夹“.git”

②解决中文名文件无法显示和提交的问题

  • git bash终端输入git config --global core.quotepath false

  • 窗口界面空白处右键选择“Options”，Text>Loacle设置为zh_CN和UTF-8即可

    git适配中文

四、购买域名

不买也行，没影响

五、安装Node.js和Hexo

1.Node.js

①安装

官网网址：

Node.js (nodejs.org)

除了安装位置没什么改动的，一直next安装好就行了

安装好后可以打开终端检查下

1
2
3
4
5
C:\Users\23163>node -v
v16.14.2

C:\Users\23163>npm -v
8.5.0

②配置

设置npm在安装全局模块时的路径和环境变量，因为默认会安C盘，而且后续Hexo可能无法正常使用

  • 先在软件安装目录下新建两个文件夹：node_cache和node_global；

  • 打开终端，根据自己安装的目录输入以下指令

    1
    2
    3
    C:\Users\23163>npm config set prefix "G:\Nodejs\node_global"

    C:\Users\23163>npm config set cache "G:\Nodejs\node_cache"

  • 设置环境变量：

    • 新增系统变量：
    image-20220322134640236

    • 编辑用户变量PATH，新建如下：

      image-20220322134836611

    • 验证：

      以管理员身份运行终端，执行npm install webpack -g：

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      C:\WINDOWS\system32>npm install webpack -g

      added 71 packages, and audited 72 packages in 40s

      8 packages are looking for funding
        run `npm fund` for details

      found 0 vulnerabilities
      npm notice
      npm notice New patch version of npm available! 8.5.0 -> 8.5.5
      npm notice Changelog: https://github.com/npm/cli/releases/tag/v8.5.5
      npm notice Run npm install -g npm@8.5.5 to update!
      npm notice

      C:\WINDOWS\system32>
      image-20220322135759841 image-20220322135915746

2.Hexo

①先在GitHub上建立一个新仓库

名称格式为“你的用户名.GitHub.io”

image-20220322140715139

创建好后点击Setting，看到如下内容表示这一步完成

image-20220322140802035

②安装Hexo

  • 首先在G盘新建一个文件夹Blog，进入并GitBashHere，输入npm命令安装Hexo：
1
npm install -g hexo-cli
image-20220322141959559

*此时hexo安装目录下是没有东西的！

  • 安装完成后，输入hexo init初始化博客

    image-20220322143617184

  • hexo g静态部署

image-20220322143703586
  • 这时网站已经部署完成，输入hexo s可以查看
image-20220322143758262

浏览器地址栏可以输入上图中HEXO提供的网址进行访问：

image-20220322143949284

Ctrl + c停止运行服务器

3.将Hexo部署到GitHub

①打开Blog文件夹中的【_config.yml】文件，在最后加上如下内容：

1
2
3
4
deploy:
  type: git
  repository: https://github.com/KQ2316336903/KQ23136336903.github.io.git
  branch: main

②在Blog文件夹内GitBashHere，输入如下命令安装Git部署插件：

1
npm install hexo-deployer-git --save
image-20220322152122247

③然后分别输入以下三条命令：

1
2
3
hexo clean		//清除缓存文件db.json和已生成的静态文件public
hexo g			//hexo generate生成网站静态文件到默认设置的public文件夹
hexo d			//hexo deploy自动生成网站静态文件，并部署到设定的仓库

弄好之后就可以在浏览器访问你的网页了!

4.卸载Hexo

首先在安装目录下执行指令：

1
npm uninstall hexo-cli -g

再删除Blog文件夹即可

六、Hexo食用指南

1.hexo项目结构

1
2
3
4
5
6
7
8
.
├── _config.yml				//整个博客网站的配置文件，里面包含了网站的配置、网址配置、目录配置、主题配置等等内容。
├── package.json
├── scaffolds
├── source					//存放用户资源/源码的地方
|   ├── _drafts
|   └── _posts
└── themes

①_config.yml文件：配置文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
...
# Site
title: Hexo				//网站标题
subtitle: ''			//副标题
description: ''			//描述
keywords:				//关键字
author: John Doe		//作者
language: en			//语言，这里记得要改成“zh-CN”，这样安装不同主题时都可以显示中文
timezone: ''			
...
url: http://example.com		//url是博客上线后的网址
...
theme: landscape		//主题配置
...

②scaffolds文件夹：模板文件夹

模板文件夹，里面存放了3个模板文件，依次是草稿模板，页面模板和文章模板。

当我们使用hexo命令生成草稿、页面或者文章的时候，就是复制这些模板。

1
2
3
├── draft.md		//草稿
├── FASTPANEL		//页面
├── post.md			//文章

post文章模板：

1
2
3
4
5
6
---
title: {{ title }}
date: {{ date }}
tags:
---
//新建的文件都会按照此模板的内容新建，带有此文件头。修改此模板则新建的文件头也会随之改变。

③source文件夹：资源/源码文件夹

项目根目录下除_post文件夹之外，以_(下划线)开头命名的文件和隐藏的文件在后续解析和部署时都会被忽略；markdown和html文件会被解析并放到public文件夹内，而其它文件会被拷贝过去。

④themes文件夹：hexo主题存放文件夹

存放下载的主题文件

2.写作

1
2
3
4
5
6
7
8
9
10
hexo s							//hexo server，运行hexo服务

hexo new 无后缀的文件名			//新建markdown文件，如果此处给文件名加了后缀如ABC.md，那么新建文件的会变成【ABC_md.md】，其他格式也是如此！所以hexo只能新建.md文件？
								//在命令行输入的文件名，会被写入到文件头内，最后在网页中的文件名上展示出来，因此网页上展示的文章文件格式有可能和源文件格式不一致！

hexo new page 文件夹名				//会在source/下创建一个新文件夹，文件夹内默认会有index.md文件，这样你访问该文件夹名的链接时会显示其内的index.md文件

hexo new draft 文件名				//这样创建的文件会被放进source/_drafts文件夹内，作为你的草稿而不会在网页显示
hexo server --draft					//在网页内预览草稿
hexo publish draft myDraft01		//将草稿文件mydraft01.md发布到博客上

文章顺序

hexo文章默认是按照创建时间为顺序倒序排列的，因此要改变文章展示顺序，应修改文件头内的date字段的时间；

Front-matter文件头

1
2
3
4
---
title: Hello World
date: 2013/7/13 20:46:25
---

预定义的参数：

1
2
3
4
5
6
7
8
9
参数				描述							默认值
layout			布局							config.default_layout
title			文章显示的标题					创建文件时起的名字
date			创建日期
update			更新日期
comments		开启文章评论功能				true
tags			标签
categories		分类
permalink		覆盖文章网址

3.主题安装和配置

网友主题推荐：Icarus、Butterfly、next、volantis、fluid等等

icarus：GitHub - ppoffice/hexo-theme-icarus: A simple, delicate, and modern theme for the static site generator Hexo.

butterfly：Hexo-Butterfly主题(🦋 A Hexo Theme: Butterfly-Official website) (butterfly1.cn)](https://www.butterfly1.cn/index.html)

next：NexT 使用文档 (iissnan.com)](http://theme-next.iissnan.com/)

volantis：https://volantis.js.org/

fluid：https://hexo.fluid-dev.com/docs/

①主题下载：

GitHub上找到主题所在的仓库，要么用git命令克隆到本地，要么下载压缩包后解压到本地：

方法一，git克隆仓库
1
2
git clone 仓库所在地址 themes/主题名		//这里的主题名自定义，在themes下会生成一个以此命名的文件夹存放主题内容
git clone https://github.com/theme-next/hexo-theme-next.git themes/next

这种方式应用的主题在更新时只需【git pull】即可！

方法二，下载压缩包解压

解压至路径【~/themes/主题名】下，该路径下要有主题的配置文件【_config.yml】

②主题应用：

将项目根目录下的配置文件【_config.yml】文件中的【theme: xxxxxx】字段改为要应用的主题名，重启服务即可

③主题配置

主题存放目录下会有主题自己的配置文件【_config.yml】，更改里面的配置信息即可更改主题样式

一般具体的配置方法都会在主题官网的帮助文档里说明。

​

更新于：2023年1月10日

博客搭建

评论