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

博客搭建流程(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+ InsertShift+ 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 clonegit 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】,更改里面的配置信息即可更改主题样式

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

评论