搭建博客并不难，难的是你没耐心看完这篇文章。
预览
你目前停留的网站即为博客预览，文章内部分图片使用 imgur 图床，如不显示请开代理。
配置详解图
最常用到的几项。
注册 GitHub
打开 GitHub 官网，点击右上角【Sign up】，输入邮箱、密码、用户名，点击【Continue】完成注册。
Fork 博客模板
GitHub 左上角搜索框输入 ssnhd.github.io 进入我的博客仓库，点击右上角【Fork】。
修改仓库名
点击【Settings】设置。
名称修改为【您的 GitHub 账户名.github.io】，点击【Rename】。
示例：maomiui.github.io
预览博客
此时，在浏览器地址栏输入 您的 GitHub 账户名.github.io 即可看到我的博客模板。
示例：浏览器输入 maomiui.github.io 打开下图样式。
如果打不开有两种可能，一是仓库名错误，二是 GitHub 同步慢等待几分钟。
GitHub Desktop
使用 GitHub Desktop 管理博客仓库，相较于网页方便很多，打开 GitHub Desktop 官网，点击下载并安装。
登陆
打开 GitHub Desktop 客户端，使用 GitHub 账号登陆。
克隆仓库
克隆仓库也就是将您的博客文件从 GitHub 网页端保存在本地，点击【Clone a Repository from the Internet…】。
选择博客仓库，设置保存在本地路径，点击【Clone】。
等待进度条走完，即博客文件已克隆保存在本地（在您上一步设置的路径处）。
选择个人，点击【Continue】。
快捷键
Command+Shift+A在编辑器中打开仓库Command+Shift+F在访达中打开仓库Command+Shift+G在网页中打开仓库
快捷键 Command+Shift+F，即可在访达中查看博客文件。
图片位置
打开 img 文件夹，图片都在这里，包括头像，各个分类背景图等。
头像、描述、ico 图标
将头像和 ico 图标添加到 img 文件夹内，最简单方法是命名和我的一样，粘贴并覆盖。
注：浏览器搜
在线生成 ICO 图标，将图片导入自动生成。
如果头像名称不一样，打开 _config.yml 修改为您的自定义名称，同时头像下方的描述也在这里修改。
1
2
3
sidebar: true
sidebar-about-description: "清迈，艺术设计师" # 描述
sidebar-avatar: /img/avatar-me.jpg # 头像
修改后打开 GitHub Desktop，可以看到 🟥 红色为删除，🟩 绿色为添加；
按下图 ➊➋➌ 步骤操作提交（意思是将本地文件同步至服务器，也就是网页显示），等待几分钟，刷新网页博客显示为您的头像。
注：修改任何文件， GitHub Desktop 都要提交才生效，建议将所有内容全部修改完再提交，不建议修改一点就提交。
博客名称，背景图
打开 _config.yml，修改为您的资料，背景图可以使用我的默认图，也可以自行修改，图片放在 img 文件夹，再将下面代码里的背景图全名修改为您的新图。
注：建议用 VSCode 软件打开这些格式文件。
1
2
3
4
5
6
7
8
title: maomiui Blog # 博客名称
SEOTitle: 猫咪的博客 | MM Blog # 显示在浏览器标签页上
header-img: img/home-bg.jpeg # 主页背景图
email: admin@gmail.com # 邮箱
description: "科技 数码" # 博客描述
keyword: "猫咪的博客, 个人网站" # 关键词
url: "http://您的 GitHub 用户名.github.io" # 您的博客地址
baseurl: "" # 不填
修改后打开 GitHub Desktop，按下图 ➊➋ 步骤提交代码，等待几分钟刷新网页，您的博客就会显示为您的名称。
社交账号
您可以开启/关闭 RSS 订阅，显示社交平台，例如微博、知乎、Twitter 等，将对应的用户名添加，开启去掉前面的 #。
1
2
3
4
5
6
7
RSS: false
weibo_username:
zhihu_username:
github_username: ssnhd
twitter_username: ssnhdcom
facebook_username:
linkedin_username: firstname-lastname-idxxxx
主页文章数量
打开 _config.yml，修改后面的数字即每页显示的帖子数量。
1
paginate: 15
FEATURED TAGS 特色标签
打开 _config.yml，默认为 1，意思是不同文章里的相同标签 ≥ 1 个才会显示在主页，如果想显示所有标签，将数字 1 改为 0。
1
2
featured-tags: true # 开启
featured-condition-size: 1 # 大于等于 1 才显示标签
ABOUT ME 关于我
打开 index.html，修改为您自己的描述座右铭。
1
2
layout: page
description: "在这个世界上，不是所有合理的和美好的都能按照自己的愿望存在或实现"
Archive 存档
打开 archive.html，修改描述和背景图。
1
2
3
4
title: Archive
layout: default
description: "我干了什么 究竟拿了时间换了什么"
header-img: "img/tag-bg.jpg"
FRIENDS 友链
打开 _config.yml，将您的朋友们友链按照下面格式添加。
1
2
# Friends
{ title: "V2EX 群", href: "https://t.me/V2EXPro/" }
文章
打开 _posts 文件夹，所有文章都在这里，删除我的文章，可以保留一个作为模板参考。
文章格式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
---
layout: post
title: 我的第一篇博客关于宋词 # 标题
subtitle: 带你走进优美宋词世界 # 副标题
date: 2022-1-8 # 日期
author: maomi # 作者（本博客默认不显示）
header-img: img/post-bg-blog.png # 背景图（在img文件夹）
catalog: true # 开启目录
top: false # true 开启置顶，false 关闭置顶
tags: # 标签
- 博客
- 宋词
---
#此处空一格，在下面写文章
## 《全宋词》
注：文章支持 Markdown 格式，图片建议用图床载入（例如 imgur），不会使用 Markdown 和图床的可以谷歌/百度搜索。
写完使用 GitHub Desktop 提交，等待几分钟刷新博客，即可查看到您的文章。
About 自我介绍
打开 _includes - about 文件夹，里面有中英文两种。
- en.md 英文
- zh.md 中文
背景图，描述
打开 about.html，修改描述和背景图，是否开启多国语言。
1
2
3
4
5
layout: page
title: "About"
description: "千万不要放弃自己的爱好"
header-img: "img/about-bg.jpg"
multilingual: true
配置信息
将一些基本资料修改为您的信息，例如标题、邮箱、GitHub 地址等。到这里基本上博客已经搭建完成。
新标签页打开
【文章】：打开 index.xml，在 <a href="{... 里添加 target="_blank"，表示文章在新标签页打开。
【超链接】：打开 _includes - head.html，在 head 头文件插入 <base target="_blank" />，表示超链接在新标签页打开。
评论功能
打开 Disqus 官网注册账号，进入设置页面输入个人信息保存。
- Avatar：头像
- Name：昵称
点击左侧【Account】，输入用户名和邮箱保存。
- Username：GitHub 用户名
- Email：邮箱
最后打开 _config.yml，将 Username 填入进去并保存，GitHub Desktop 提交生效。
示例：
1
2
# Disqus 评论
disqus_username: qingmai
网页客户端
Chrome 浏览器支持将您的博客安装成独立的 App。
打开 pwa - icons 文件夹，修改为您自己的图片。
打开 pwa 文件夹内 manifest.json，修改名称和描述等。
1
2
3
4
{
"name": "QM Blog",
"short_name": "QM Blog",
"description": "About an engineer & designer who loves web.",
自定义域名
准备好您购买的域名，我是在 cloudflare 平台进行解析，添加记录：
www表示www.ssnhd.com@表示ssnhd.comIP 地址填入您博客网址的美国服务器地址（站长之家查询 IP 地址）
打开 CANME，将域名填入保存，GitHub Desktop 提交生效，等待几分钟浏览器输入您的域名即可打开博客。
