快速搭建个人博客网站 #
1. 目标 #
- 配置简单，搭建方便，不需要写一行代码
- 部署容易，支持主流的网页托管平台和CDN
- 所有数据留存在本地，数据安全
- 具有少的攻击面，安全运行，减少运维成本
- 内容编辑方便，支持Markdown文本格式
2. 环境和工具 #
2.1 工具套件 #
- 操作系统：Windows 10
- 版本管理工具：git
- Go语言的开发编译工具：Golang
- JavaScript运行时环境：Node.js
- 世界上最快的网站构建框架：Hugo
- 文本编辑器：Visual Studio Code
- Markdown编辑器：Yank Note
2.2 工具下载安装 #
工具下载下来，双击运行，默认点击下一步进行安装。
-
git: https://git-scm.com/
-
Golang: https://golang.google.cn/
-
Node.js: https://nodejs.cn/download/
-
Hugo: https://gohugo.io/installation/
-
Visual Studio Code: https://code.visualstudio.com/
-
Yank Note: https://yank-note.com/zh-CN
3. Hugo快速开始创建网站 #
在目录myblog中为您的项目创建目录结构:
hugo new site myblog
目录切换到myblog:
cd myblog
在当前目录中初始化一个空的 Git 存储库:
git init
将Ananke主题克隆到目录中，将其作为Git子模块添加到您的项目中：
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
在站点配置文件中附加一行，指示当前主题:
echo “theme = ‘ananke’” » hugo.toml
启动Hugo的开发服务器以查看站点:
hugo server
4. Hugo目录结构 #
myblog/
├── archetypes/
│ └── default.md
├── assets/
├── config/
│ └── _default/
│ └── hugo.toml
├── content/
├── data/
├── i18n/
├── layouts/
├── public/ <-- created when you build your site
├── resources/ <-- created when you build your site
├── static/
└── themes/
-
myblog 网站主目录，自定义设置
-
archetypes 该目录包含新内容的模板。查看详细信息。
-
assets 该目录包含通常通过 Asset Pipeline 传递的全局资源。这包括图像、CSS、Sass、JavaScript 和 TypeScript 等资源。查看详细信息。assets
-
config 该目录包含您的站点配置，可能拆分为多个子目录和文件。对于配置最少的项目或不需要在不同环境中表现不同的项目，在项目根目录中命名的单个配置文件就足够了。
-
content 该目录包含构成网站内容的标记文件（通常为 Markdown）和页面资源。
-
data 该目录包含数据文件（JSON、TOML、YAML 或 XML），用于增强内容、配置、本地化和导航。
-
i18n 该目录包含多语言站点的翻译表。
-
layouts 目录包含用于将内容、数据和资源转换为完整网站的模板。
-
public 该目录包含已发布的网站，该网站在您运行时生成。Hugo 根据需要重新创建此目录及其内容。
-
resources 该目录包含来自 Hugo 资产管道的缓存输出，这些输出在您运行时生成。默认情况下，此缓存目录包括 CSS 和图像。
-
static 该目录包含的文件将在您构建站点时复制到 public 目录。
-
themes 该目录包含一个或多个主题，每个主题都位于其自己的子目录中。
5. 使用Yank Note管理网站内容 #
-
主要关注content这个目录，在这个目录新建posts文件夹，网站内容都放在posts文件夹中。
-
Yank Note添加仓库路径
-
使用Markdown进行内容创作
6. 本地调试 #
hugo server
浏览器访问: http://127.0.0.1:1313
7. 生成静态页面 #
hugo –baseURL=“https://coderdudu.github.io/"
8. 使用github进行页面托管 #
-
创建一个用户名开头的仓库，格式是确定的，用户名.github.io
-
仓库下载到本地
git clone https://github.com/coderdudu/coderdudu.github.io.git
- 复制静态页面到本地仓库
cp -r ./public/* ./coderdudu.github.io/
- git提交
cd ./coderdudu.github.io/
git add .
git commit -m "update site 快速搭建个人博客网站"
git push
9. 自动化脚本 #
#!/bin/bash
### 部署到 github pages 脚本 ###
# 错误时终止脚本
set -e
# 删除静态页面文件夹
rm -rf public
# 重新生成静态页面
hugo --baseURL="https://coderdudu.github.io/"
# 复制静态页面到本地git仓库
cp -r ./public/* ./coderdudu.github.io/
# git推送到github
cd ./coderdudu.github.io/
git add .
# commit changes.
msg="update site `date`"
git commit -m "$msg"
git push
git终端可以在Windows上运行shell脚本：
