011-建立个人博客的基本流程

一. 前言

1.1 导读

思维导图里有教程链接，但简单看看就好，有些教程不可避免的有坑，还是要留意正文提醒
思维导图中绿色的是笔者亲自实践过的，极力推荐。
文章正文我计划采用统一格式如下：概念，教程，避坑指南。
概念：用最通俗的语言讲解是什么
教程：让其他博主大佬教你怎么做
避坑指南：指出由于版本问题，部分教程存在方法失效时的解决办法

1.2 思维导图(在线预览)

1.3 我的博客配置

• 框架：Hexo
• 主题：Butterfly
• 部署：github + 阿里云服务器(ECS) 双线部署
• 图床：github + 去不图床 + 缤纷云 (还在纠结中)
• 域名：codertoro.top
• 写作：Typora
• 博客网址：codertoro.top coder-ox.github.io

二.建站-免费版

2.1 静态博客

2.1.1 方法一(hexo+github)

2.1.1.1 概念

HTML(超文本标记语言)格式的网页通常被称为静态网页，是直接渲染生成HTML标准的文件呈现给客户端，不需要数据库的支撑就可完成。静态博客中可以包含文本、声音、图像、FLASH动画等。(现在静态博客也可以添加评论留言了)
网站搭建是需要框架的，不是手写一堆html,css,js文件，这些则是框架帮助我们自动生成的。今后写文章我们只需要用编辑器写一个MarkDown格式的.md文件，hexo会为我们自动渲染。
我推荐的是使用Hexo框架搭建博客，并把项目部署(保存)在github上。

2.1.1.2 教程

• 视频教程(有坑，详见避坑指南)
• 辅助教程(比较新)

2.1.1.3 避坑指南

• 在hexo d时输入的github密码应该是github tokens(获取方式)
• 在 _ config.yml 文件配置中branch写mian和master都可以，但是只能写其中的一个本文称作mybranch，而且要在github中对应仓库做相应设置

Click

• 更改默认branch为mybranch
• 更改pages为相应的mybranch

更改默认branch为mybranch

更改pages为相应的mybranch

• 示例：

  deploy: type: 'git' repository: server: codertoro@公网ip:/home/codertoro/blog.git #服务器 github: https://github.com/coder-ox/coder-ox.github.io.git #GitHub coding: git@e.coding.net:codertoro/codertoro/codertoro.git #coding branch: master #分支

2.1.2 方法二(hexo+github+vercel) 五星推荐

2.1.2.1 概念

基本原理是将方法一里hexo init生成的整个blog文件(一定不是hexo d所上传的public文件夹) 通过git push上传到一个新的github仓库，然后再用该github账号登录vercel，在vercel中进行在线部署，部署完可以绑定自己的域名进行访问。

2.1.2.2 教程

程序员必备的git基础教程(看一部分即可，必备知识)
git学习手册
教程

2.1.2.3 避坑指南

如果会git操作，这个方法还是很简单的。使用这种方法部署访问速度很快。

2.2 动态博客

2.2.1 概念

所谓动态，是指网页渲染是通过动态调用再解析而成，生产的网页不是HTML文件，需要服务器端伪装成HTML文件呈现给客户端。“动”不是指网页中的页面元素或者特效在动，而是指与后台数据库进行交互，进行数据传递。比如用户注册登录、留言等功能。

2.2.2 教程

Click

更改默认branch为mybranch

2.2.3 避坑指南

注意操作系统和教程一致，不同版本操作会有些许不同。

三. 建站-收费版

3.1 静态博客

3.1.1 方法一(hexo + 云服务器)

3.1.1.1 概念

所谓收费版，也就是购买云服务器，将代码托管到云服务器上。

3.1.1.2 教程

无坑教程-图文版(来源)
无坑教程-视频版(推荐)

3.1.1.3 避坑指南

我使用得CentOS7.9，按照视频版一步一步操作，是没有坑的。

3.1.2 方法二(付费版Craft)

3.1.2.1 概念

Craft是一款笔记软件，支持各种格式的笔记，包括MarkDown。自带分享功能，可以生成文章外链，同时也支持评论，样式模版也很多。

3.1.2.2 教程

• 买会员，不贵(某宝35元/年)。没错，普通用户储存空间和块的数量很少，不能用来建站。
• 建一个博客主页，本质也是一片MarkDown文章
• 在主页内插入卡片写内容文章
• 点击分享，生成主页链接(示例: https://www.craft.do/s/Z7roAWK2qgeJNv)
• 博客搭建完成
• 进阶-》
• 给自己的域名添加一条显性URL解析记录，跳转到主页链接。
• 注: (隐形URL记录会显示域名不安全，因为没有服务器，无法进行SSL认证)

  3.1.2.3 避坑指南

  优点：
• 划算 (从某宝价格来看)，虽然理论上建立博客不用花钱，所以白嫖党建议使用免费版的方法二。
• 速度快，不用和访问巨慢的github打交道
• 功能全，自带云空间和分享功能，还能实时更新
• 美观，无论是软件本身，还是写出来的文章，亦或是生成的网页，都好看
• 启动快，功能齐全还可以秒启动，真不戳
• 稳定，该软件能在2021年苹果的app store获年度app奖，大概率不会跑路，数据可以稳定存储
  缺点:
• 底部和右上角有水印，不过还能接受
• 无法在微信内打开，不方便分享和临时查看(浏览器可以)
• 方便的同时缺少了建站，魔改的乐趣，可选样式不多(不过样式一多就花里胡哨了)
• 只用商业版可以自定义域名，普通PRO用户只能考虑URL跳转

  3.2 动态博客

  3.2.1 概念

  常见的大型网站都是这样，有前后端，比如百度，微博等

  3.2.2 教程

  暂无

  3.2.3 避坑指南

  暂无

四. 域名

4.1 购买

4.1.1 概念

所谓域名，也就是网站地址的别名。如果你的域名是mydomain.com,你在浏览器输入mydomain.com后，各地的探测点会优先搜索本地的DNS缓存，如果缓存有，则会返回缓存的解析信息(可能是ip地址，也可能是域名)，如果没有缓存，则会向域名提供商发出请求，获得该域名缓存，然后返回。缓存的信息存在时长叫做TTL。最短为10分钟，即每十分钟会更新一次本地缓存。

4.1.2 教程

直接上阿里云官网，找到域名注册，输入你想注册的域名，看价格即可

4.1.3 避坑指南

1. 域名不算很贵，便宜的30元左右/年，普通的80-90元/年。一般.com,.cn,.net比较贵，我买的.top第一年只需要1元,后续每年续费需要29元。后缀选择看个人喜好，.com,.cn一般比较耳熟能详，容易让人记住。.top,.ren之类的比较冷门，但便宜。
2. 初次注册很便宜，多买几年更划算，除非像我一样，想买来玩玩，还不确定要不要一直用，那就买一年即可，同时既然是买来玩玩，那就没必要买太贵的，我买的codertoro.top，初次注册只需要1元/年。

4.2 解析

4.2.1 概念

解析的种类有很多，常用的有两种解析类型，一种CNAME,一种A。如图：

Click

4.2.2 教程

官方教程

4.2.3 避坑指南

CNAME更改后需要等待10分钟才能生效，立即生效的概率比较低。

4.3 备案

4.3.1 概念

备案分为ICP备案和网安备案

4.3.2 教程

双备案教程
备份链接(以上链接失效使用)

4.3.3 避坑指南

请确定好当前备案域名你一直要用，如果是临时申请准备用一小段时间的话，备案不太划算(虽然不花钱，但备案需要一个多月，太浪费时间和精力)
ICP备案注意事项：如果你是使用阿里云ICP备案，会要求你提供ICP备案服务码，这个码可以单独购买，官网卖100元；如果你有阿里云服务器的话，是可以免费申请五个ICp备案服务码。那么问题来了，买服务器也得花钱呀？其实没必要，如果你是学生，阿里云有一个飞天计划可以免费领取7个月(1+6)的服务器，可以用这个服务器来申请ICP备案服务码。如果这个活动失效了，应该会有新的针对学生用户的免费活动，领取服务器后即可申请服务码。实在不行网上也有卖服务买的，我就是买的别人的服务码，10元一个，支持某宝交易，具体渠道就不透露了，可自行查找，但谨防上当受骗 。
飞天加速计划如图：

Click

4.4 https证书(SSL证书)

4.4.1 概念

只有域名绑定了SSL证书，浏览器才会显示网站安全。否则会显示网站不安全，也就是只能使用http访问，不能使用https

4.4.2 教程

可以申请免费证书(能不花钱尽量不花)(申请免费DV单域名试用证书 (aliyun.com))

4.4.3 避坑指南

要先申请根域名的证书，再申请子域名(有需求的话)，mydomain.com和www. mydomain.com是在一起申请的，即只需要申请www. mydomain.com， mydomain.com也会同时申请。如图：

Click

4.5 子域名

4.5.1 概念

类似child.mydomain.com

4.5.2 教程

在域名解析页面点击添加页面就可以添加子域名，按照要求添加txt验证即可

4.5.3 避坑指南

暂无

五. 主题与魔改

5.1 主题

5.1.1 概念

先选主题之前，先确定好是走简约风还是花里胡哨风(无贬义)，简约风不需要什么魔改，简洁内容突出；花里胡哨风功能多，界面好看。博客大体长什么样子，有些主题又有其特有的外挂插件，具体看以下教程，也可以自行百度。

5.1.2 教程

常见的Hexo主题

5.1.3 避坑指南

文章内容最重要，主题不是很重要，也是随时可以换的。

5.2 魔改

5.2.1 概念

不同主题有不同的魔改教程，魔改就是添加css,js文件让博客功能和外观更好看。

5.2.2 教程

介绍一下找魔改教程的方法

• 直接搜索引擎搜索
• 去别人博客的友情链接里一顿狂点，找到和自己一样的，好看的主题博客，看看他有没有写对相应的魔改教程(推荐，不容易走弯路，但建议找个比较好的教程，全程跟他的教程走)

  5.2.3 避坑指南

  在大量不确定的博改之前，建议将整个博客文件备份

六. 写作

6.1 工具(软件)

6.1.1 概念

一个写MarkDown语法的文本编辑软件，我推荐Typora，下载地址。

6.1.2 教程

MarkDown语法比较简单，三分钟学会。
语法教程

6.1.3 避坑指南

暂无

6.2 语法

6.2.1 概念

MarkDown语法

6.2.2 教程

语法教程

6.2.3 避坑指南

暂无

6.3 存储照片/视频

6.3.1 概念

博客中的图片和视频都是通过链接引入的，我们需要将图片保存到一个存储桶中，存储痛给我们一个链接。各大存储桶都会进行内容审核，我们要遵纪守法，严禁上传违禁内容

6.3.2 教程

只存图片
收费的图床：去不图床
只存视频
各大视频平台：b站，优酷，爱奇艺，腾讯视频
同时存放图片和视频
对象存储：阿里OSS, 腾讯COS,缤纷云(推荐)

6.3.3 避坑指南

暂无

6.4 图床

6.4.1 概念

只能存储图片

6.4.2 教程

图床整体概述； 链接
我目前使用的简单版(推荐)：链接
小康大佬的复杂版(比较复杂): 链接

6.4.3 避坑指南

想稳定，就得付费。想白嫖，就要承担图床商家跑路的风险。鱼和熊掌不可兼得。

七. 后续优化

可自行百度，我的博客是将源码放在github上通过vercel部署，同时提供CDN加速，访问速度还可以。

• CDN加速
• 图片/代码压缩