(2023.2.6更新) 任何教程都有可能过期。
如果按教程操作失败, 多利用网络寻求和解决方法,寻找解决方法的能力是非常宝贵的
文章中的转载的链接版权归原作者所有,如有侵权,可联系删除

一. 前言

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中对应仓库做相应设置
  • 示例:
    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 教程

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。

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元一个,支持某宝交易,具体渠道就不透露了,可自行查找,但谨防上当受骗
飞天加速计划

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也会同时申请。

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加速
  • 图片/代码压缩