如何利用 AtomGit Pages 快速搭建你的静态站点

最终效果地址：https://kaiyuanxiaobing.atomgit.net/my-blog-website/

准备工作

在开始之前，请确保你已经有了以下条件：

一个 AtomGit 账户。
安装 Git：
- Windows：下载并安装 Git for Windows。
- macOS：
  - 首先，检查是否已经安装了 Git：在终端中运行 git --version。
  - 如果未安装，使用 Homebrew 安装 Git：brew install git。
  - 如果已安装，但版本较旧，可以使用 Homebrew 更新 Git：brew update && brew upgrade git。
- Linux：
  - 首先，检查是否已经安装了 Git：在终端中运行 git --version。
  - 如果未安装，使用你的包管理器安装 Git（例如，在 Ubuntu 上使用 sudo apt-get update && sudo apt-get install git）。
  - 如果已安装，但版本较旧，可以使用包管理器更新 Git（例如，在 Ubuntu 上使用 sudo apt-get update && sudo apt-get upgrade git）。
安装 Hugo：静态博客系统有很多，可以根据自己的喜好选择，本教程选择用 hugo。
- Windows：下载并安装 Hugo for Windows。
- macOS：使用 Homebrew 安装 Hugo (brew install hugo) 或者下载 Hugo for macOS。
- Linux：使用 Snap 安装 Hugo (sudo snap install hugo) 或者下载 Hugo for Linux。

配置 Git 用户信息：在终端中运行以下命令来设置你的用户名和电子邮件地址：

复制代码
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

步骤 1：创建 AtomGit 仓库

登录你的 AtomGit 账户

https://atomgit.com

创建两个新的仓库：my-blog-source 和 my-blog-website

注意：my-blog-website 仓库需要设置为“公开”类型，否则Pages将无法正确的访问。

步骤 2：克隆仓库到本地

生成和添加 SSH 密钥：如果你还没有为 AtomGit 生成 SSH 密钥，请按照AtomGit 的官方文档，配置SSH密钥中的说明进行操作。确保你的 SSH 密钥已经添加到你的 AtomGit 账户设置中。
获取my-blog-source的仓库URL

git@atomgit.com:kaiyuanxiaobing/my-blog-source.git
在你的电脑上打开终端或命令提示符，使用 cd 命令切换到你想要存放博客项目的文件夹。比如本教程中是“ C:\Users\User”
克隆 my-blog-source 仓库：
```
git clone 你的用户名/my-blog-source.git
```
本教程中是：git clone git@atomgit.com:kaiyuanxiaobing/my-blog-source.git
进入克隆下来的仓库目录：
```
cd my-blog-source
```

步骤 3：初始化 Hugo 站点

在 my-blog-source 目录下运行以下命令初始化 Hugo 站点：
```
hugo new site .
```
🙌注意：如果该目录下不是空的，请使用--force参数，如下图。
安装一个 Hugo 主题。

hugo 有非常丰富的主题可供选择，请访问：https://themes.gohugo.io/。例如，本教程使用以下命令安装 ananke 主题：
```
git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke
```
打开 hugo.toml 文件，添加以下内容来指定你安装的主题：
```
theme = "ananke"
```

步骤 4：创建你的第一篇博客文章

使用以下命令创建一篇新文章：
```
hugo new posts/my-first-post.md
```
编辑 content/posts/my-first-post.md 文件，添加你的文章内容。

步骤 5：本地预览

在 my-blog-source 目录下运行以下命令来启动本地服务器：
```
hugo server -D
```
打开浏览器，访问 http://localhost:1313 来预览你的博客。

步骤 6：配置 Hugo 输出路径

打开 config.toml 文件，添加以下内容来指定编译后的输出路径：
```
publishDir = "../my-blog-website"
```
将 my-blog-website 目录初始化为一个 Git 仓库，执行以下命令：
```
cd ..
mkdir my-blog-website
cd my-blog-website
git init
```
将 my-blog-website 目录与 AtomGit 上的 my-blog-website 仓库关联：
- 获取“my-blog-website”仓库的远程地址。具体方法可以仓库上面的“#### 步骤 2：克隆仓库到本地”
- 地址为：“git@atomgit.com:kaiyuanxiaobing/my-blog-website.git”
```
git remote add origin  你的用户名/my-blog-website.git
```
上面 origin 后面的内容请用你自己的“my-blog-website”地址替换。

步骤 7：编译并发布博客

通过以上，我们从本地可看到自己的站点已经可以正常运行出来了。
我们需要编译，将其发布到 AtomGit 你的“my-blog-website”仓库中。执行下面的命令。
```
hugo
cd ../my-blog-website
git add .
git commit -m "my website init."
git push -u origin master
```
在AtomGit设置并且开启 Pages 功能。

进入“my-blog-website”仓库的设置，找到 Pages，按照指引一步步操作。最后在仓库的设置Pages下就能看到已经安装了Pages功能，并且有了静态站点的默认 URL，本教程中是 https://kaiyuanxiaobing.atomgit.net/my-blog-website

步骤 8：线上效果

通过以上的配置和操作，我们就可以实现撰写、编译和部署自己的静态网站到 AtomGit 的 Pages 上了。如下图，教程的最终结果如下。

教程发布后的地址：https://kaiyuanxiaobing.atomgit.net/my-blog-website/

用脚本自动化执行：编译并发布

如果用了下面的自动化脚本之后，最终的“my-blog-source”目录结构可能是这样，但也不是一定。

运行相应的脚本（根据你的操作系统选择对应的脚本）。

#### Windows (批处理文件)

将下面的代码保存为 `update_blog.bat` 文件，然后在命令提示符或 PowerShell 中运行它。

```batch
@echo off

:: 定义仓库路径和远程仓库 URL
set SOURCE_DIR=my-blog-source
set WEBSITE_DIR=my-blog-website
set SOURCE_REPO_URL=git@atomgit.com:yourusername/my-blog-source.git
set WEBSITE_REPO_URL=git@atomgit.com:yourusername/my-blog-website.git

:: Configure Git user identity
git config --global user.email "你自己的邮箱"
git config --global user.name "你自己的用户名"

:: 构建 Hugo 站点
cd %SOURCE_DIR%
hugo

:: 将源博客数据推送到远程仓库
git add .
git commit -m "Update blog source"
git push origin master

:: 将生成的文件添加到网站仓库并推送
cd ..\%WEBSITE_DIR%
git add .
git commit -m "Update blog content"
git push origin master

echo Blog source and website updated and pushed to AtomGit Pages.
```

#### macOS 和 Linux (Bash 脚本)

将下面的代码保存为 `update_blog.sh` 文件，并赋予它执行权限：

```bash
#!/bin/bash

# 定义仓库路径和远程仓库 URL
SOURCE_DIR="my-blog-source"
WEBSITE_DIR="my-blog-website"
SOURCE_REPO_URL="git@atomgit.com:yourusername/my-blog-source.git"
WEBSITE_REPO_URL="git@atomgit.com:yourusername/my-blog-website.git"

# Configure Git user identity
git config --global user.email "你自己的邮箱"
git config --global user.name "你自己的用户名"

# 构建 Hugo 站点
cd $SOURCE_DIR
hugo

# 将源博客数据推送到远程仓库
git add .
git commit -m "Update blog source"
git push origin master

# 将生成的文件添加到网站仓库并推送
cd ../$WEBSITE_DIR
git add .
git commit -m "Update blog content"
git push origin master

echo "Blog source and website updated and pushed to AtomGit Pages."
```

然后运行：

```bash
chmod +x update_blog.sh
./update_blog.sh
```

请确保将 yourusername 替换为你的 AtomGit 用户名，并将 my-blog-source 和 my-blog-website 替换为你的实际仓库名称。此外，确保 Hugo 和 Git 都已经添加到你的系统环境变量中，以便脚本可以在命令行中找到这些工具。

参考资料

hugo：https://gohugo.io/
ananke：https://github.com/theNewDynamic/gohugo-theme-ananke

准备工作#

步骤 1：创建 AtomGit 仓库#

步骤 2：克隆仓库到本地#

步骤 3：初始化 Hugo 站点#

步骤 4：创建你的第一篇博客文章#

步骤 5：本地预览#

步骤 6：配置 Hugo 输出路径#

步骤 7：编译并发布博客#

步骤 8：线上效果#

用脚本自动化执行：编译并发布#

参考资料#