AndyCao's Blog
0%

发表于 分类于
本文字数： 1.6k 阅读时长 ≈ 1 分钟

基本流程

  1. 拥有一个Github账号
  2. 安装好Git、node.js、hexo
  3. 通过Cloudflare购买域名
  4. 参考教程部署基于hexo的静态网页博客
    保持全程科学上网
    任何不懂的问题都可以问GPT老师

参考链接

  1. 知乎用户：枫叶-从零开始搭建个人博客(1-8篇)
  2. 攻城狮杰森的博客:快速搭建个人博客 —— 保姆级教程

具体细节

1.注册Gtihub、安装Git、配置好本地和Github仓库的SSH连接

鉴于网络上教程已经非常多，此处便多赘述。
注意Github的双重验证登录以及SSH连接配置

2.在Cloudflare购买域名

首先在阿里云万网搜索自己想要的域名是否被注册，然后到Cloudflare购买域名，需要使用到外币信用卡或Paypal支付。
在不同的域名商处购买同一个域名价格不太一样，不过笔者嫌麻烦就直接在Cloudflare上面买了

3.安装node.js、hexo，并且在Github上面创建xxxx.github.io的仓库

  • node.js的安装教程中文互联网也有很多
  • hexo通过Git命令行安装即可 npm install -g hexo-cli
    • hexo本质上类似于一个「工厂」，输入是文章（.md 文件），输出是网页（.html 文件）
  • 可以参考文章：个人博客第5篇——安装node.js和Hexo
  • Github上创建名为

    xxxx.github.io
    的仓库会自动解析为github page的免费托管主页，相当于一个免费的服务器

中间遇到的问题有

  1. token确定身份问题
  2. 验证ssh密钥问题

均通过和Chatgpt反复提问以及Google搜索解决
等成功配置好后，就可以在网页里面输入xxxx.github.io访问已经搭建好的Hexo博客网站了

4.通过Cloudflare配置DNS

为域名

caoyueyang.org
添加四条A记录，成功后就能通过域名访问网站了

1
2
3
4
5
类型: A
名称: @
值: 185.199.108.153
TTL: Auto
代理状态: DNS only (灰色小云)

Github pages官方建议添加四条，以此增加服务稳定性

1
2
3
4
185.199.108.153
185.199.109.153
185.199.110.153
185.199.111.153

同时再添加一条CNAME记录，让www子域名也能访问(前缀增加www之后也会自动跳转到购买的域名)

1
2
3
4
5
类型: CNAME
名称: www
值: greatandyc.github.io
TTL: Auto
代理状态: DNS only (灰色小云)

等到Github Pages页面完成DNS解析和HTTPS证书自动申请后即完成博客框架的搭建

5.Hexo配置文件更改

在一开始本地创建的博客根目录下的_config.yml文件中可以对网页进行配置

通过命令行git clone https://github.com/theme-next/hexo-theme-next themes/next可以下载别人制作的博客主题，这里笔者选了和教程一样的主题next

同时还可与在主题的配置文件里面对next的细分主题进行选择，此处不过多赘述，可以自行询问GPT老师和Google

参考教程优化主题对主页的栏目设置(侧边栏、评论区、友链等)完成后，主页应该如下图类似：

之后便可以愉快地在博客里面增加文章了

本地文章保存在Blog/source/_posts中
通过在Git bash里面输入命令hexo clean && hexo g && hexo d即可完成网页的更新，具体流程可参考博客的新博客工作流，优化md格式可以参考本博客的Markdown基本语法

遇到的问题

  1. Github文件夹大小写命名和本地不同，根本原因在于windows默认设置大小写不敏感，但是Linux系统对大小写敏感，这样的结果会导致有时候网站无法识别文件夹名字，导致网页出现404，解决方案是删掉远程仓库的文件，重新配置git，从头开始重新上传改好名字的文件夹。

发表于 分类于
本文字数： 334 阅读时长 ≈ 1 分钟

第一步：新建并编辑md文件

可以选择在Git bash 里输入

1
hexo new post "xxxx"

或者手动在Window系统中右键新建md文件，编辑好tags、categories等之后保存

第二步：渲染HTML文件

执行

1
hexo clean && hexo g && hexo s

在本地的网页访问没有问题后
执行

1
hexo clean && hexo g && hexo g

渲染完成的文件会自动pull到Github的gh-pages分支下

第三步：添加Comment并将源码pull到main分支下

执行

1
2
3
git add .
git commit -m "post:文章标题"
git push origin main

发表于 分类于
本文字数： 1.5k 阅读时长 ≈ 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
37
38
39
40
41
42
43
# 一级标题
第一步：需要有一个Github账号，新开一个仓库命名为  
改主题需要在根目录的yaml文件下修改theme处的内容  
改theme next的细分主题需要在scheme处改  
hexo new post “xxxx”增加新文章  

---

## 二级标题 文字样式
坑
- Github上的文件夹不区分大小写，本地如果更改了pull不会发生改变，必须重命名再改回来

- **大小写问题**
- *斜体文本*
- ~~删除线~~

---

## 二级标题：引用
> 这是引用文字
> 可以多行，常用来放格言或提示

---

## 二级标题 列表
无序列表
- 苹果
- 香蕉
  - 小香蕉
  - 大香蕉
- 橙子

有序列表：
1. 第一步
2. 第二部
3. 第三步


## 二级标题 代码
行内代码 `console.log("Hello world!")`

多行代码块：

1
2
3
4
5
python
def hello(name):
    print(f"Hello, {name}")

hello("Andy")
1
2
3
4
5
6
7
8
9
10
11
12

## 二级标题 链接和图片
这是一个[Bing搜索](www.bing.com)的链接

本地图片(放在`source/images/`下)：
<img src="/images/test.png" alt="示例图片"
     style="width:300px; border:2px solid #ccc; box-shadow:2px 2px 8px rgba(0,0,0,0.3); display:block; margin:auto;">

参考系列文章链接：
1. https://zhuanlan.zhihu.com/p/106060640
2. https://pdpeng.github.io/2022/01/19/setup-personal-blog/#%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7

效果如下

一级标题

第一步：需要有一个Github账号，新开一个仓库命名为
改主题需要在根目录的yaml文件下修改theme处的内容
改theme next的细分主题需要在scheme处改
hexo new post “xxxx”增加新文章

二级标题 文字样式

坑

  • Github上的文件夹不区分大小写，本地如果更改了pull不会发生改变，必须重命名再改回来

  • 大小写问题

  • 斜体文本

  • 删除线

二级标题：引用

这是引用文字
可以多行，常用来放格言或提示

二级标题 列表

无序列表

  • 苹果
  • 香蕉
    • 小香蕉
    • 大香蕉
  • 橙子

有序列表：

  1. 第一步
  2. 第二部
  3. 第三步

二级标题 代码

行内代码 console.log("Hello world!")

多行代码块：

1
2
3
4
5
python
def hello(name):
    print(f"Hello, {name}")

hello("Andy")

二级标题 链接和图片

这是一个Bing搜索的链接

本地图片(放在source/images/下)：
示例图片

参考系列文章链接：

  1. https://zhuanlan.zhihu.com/p/106060640
  2. https://pdpeng.github.io/2022/01/19/setup-personal-blog/#%E5%BC%80%E5%8F%91%E5%B7%A5%E5%85%B7

发表于 更新于
本文字数： 29 阅读时长 ≈ 1 分钟

这是我的博客的第一篇文章，希望能够开启我走向世界的第一步！

发表于
本文字数： 367 阅读时长 ≈ 1 分钟

Welcome to Hexo! This is your very first post. Check documentation for more info. If you get any problems when using Hexo, you can find the answer in troubleshooting or you can ask me on GitHub.

Quick Start

Create a new post

1
$ hexo new "My New Post"

More info: Writing

Run server

1
$ hexo server

More info: Server

Generate static files

1
$ hexo generate

More info: Generating

Deploy to remote sites

1
$ hexo deploy

More info: Deployment