跳到主要内容

2 篇博文 含有标签「html」

查看所有标签

· 阅读需 9 分钟
Kyle

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

image.png

准备工作

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

  1. 一个 AtomGit 账户。
  2. 安装 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)。
  1. 安装 Hugo: 静态博客系统有很多,可以根据自己的喜好选择,本教程选择用 hugo。
  1. 配置 Git 用户信息: 在终端中运行以下命令来设置你的用户名和电子邮件地址:
git config --global user.email "you@example.com"
git config --global user.name "Your Name"

1:创建 AtomGit 仓库

  1. 登录你的 AtomGit 账户

image.png

  1. 创建两个新的仓库:my-blog-sourcemy-blog-website

image.png

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

2:克隆仓库到本地

  1. 生成和添加 SSH 密钥: 如果你还没有为 AtomGit 生成 SSH 密钥,请按照AtomGit 的官方文档,配置SSH密钥 中的说明进行操作。 确保你的 SSH 密钥已经添加到你的 AtomGit 账户设置中。

  2. 获取my-blog-source的仓库URL

git@atomgit.com:kaiyuanxiaobing/my-blog-source.git image.png

  1. 在你的电脑上打开终端或命令提示符,使用 cd 命令切换到你想要存放博客项目的文件夹。比如本教程中是“ C:\Users\User”

  2. 克隆 my-blog-source 仓库:

git clone 你的用户名/my-blog-source.git

本教程中是:git clone git@atomgit.com:kaiyuanxiaobing/my-blog-source.git

image.png

  1. 进入克隆下来的仓库目录:
cd my-blog-source

image.png

3:初始化 Hugo 站点

  1. my-blog-source 目录下运行以下命令初始化 Hugo 站点:
hugo new site .

🙌注意:如果该目录下不是空的,请使用--force参数,如下图。

image.png

  1. 安装一个 Hugo 主题。

hugo 有非常丰富的主题可供选择,请访问:https://themes.gohugo.io/。 例如,本教程使用以下命令安装 ananke 主题: image.png

git submodule add https://github.com/theNewDynamic/gohugo-theme-ananke.git themes/ananke

image.png

  1. 打开 hugo.toml 文件,添加以下内容来指定你安装的主题:
theme = "ananke"

image.png

4:创建你的第一篇博客文章

  1. 使用以下命令创建一篇新文章:
hugo new posts/my-first-post.md

image.png

  1. 编辑 content/posts/my-first-post.md 文件,添加你的文章内容。

image.png

5:本地预览

  1. my-blog-source 目录下运行以下命令来启动本地服务器:
hugo server -D

image.png

  1. 打开浏览器,访问 http://localhost:1313 来预览你的博客。 image.png

6:配置 Hugo 输出路径

  1. 打开 config.toml 文件,添加以下内容来指定编译后的输出路径:
publishDir = "../my-blog-website"

image.png

  1. my-blog-website 目录初始化为一个 Git 仓库,执行以下命令:
cd ..
mkdir my-blog-website
cd my-blog-website
git init
  1. 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:编译并发布博客

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

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

image.png

8:线上效果

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

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

image.png


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

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

image.png

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

Windows (批处理文件)

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

@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 文件,并赋予它执行权限:

#!/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."

然后运行:

chmod +x update_blog.sh
./update_blog.sh

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


参考资料

· 阅读需 6 分钟
Kyle

0、前提条件

可能有的人是首次使用,那么我们可以尽量全面介绍,照顾到细节。 为了简化操作的复杂度,尽量全部用 GUI 的形式来操作。

  • Windows11
  • Python3
  • NodeJS v20.12.2
  • Git Client:OpenLinkSaaS

1、安装所需软件和运行环境配置

1)安装 Python

推荐使用 Anaconda 进行 Python 开发,它集成了 Python 解释器和常用的科学计算库,方便管理环境和软件包,尤其适合数据科学、机器学习等领域。

image.png image.png image.png

  • 验证 Python 安装成功

image.png

2)安装NodeJS

image.png image.png image.png image.png

  • 验证 NodeJS 安装成功

image.png

3)安装OpenLinkSaaS

image.png image.png image.png

2、下载开源项“开放原子开源活动贡献榜”

2.1、用你的 AtomGit 登录 OpenLinkSaaS

image.png image.png

2.2、设置 SSH,让你的本地电脑和AtomGit 进行通信

  • 生成 SSH Key

image.png

  • 复制 SSH Key 公钥

image.png

  • 在 AtomGit 中设置此公钥

image.png

2.3、推荐使用 SSH 方式下载克隆

image.png image.png image.png image.png

3、数据转换

进入“开放原子开源活动贡献榜”项目的“src”目录

image.png

在“src”目录下,打开终端

image.png

安装python 项目的依赖包:pandas

pip install pandas image.png

执行命令python3 .\convert.py

4、项目test & build

1) test

进入“开放原子开源活动贡献榜”根目录,并且打开终端

注意,以下操作都在 master分支操作。

  • 安装 Nodejs 的 NPM 包依赖,执行下面命令

npm install

  • 上线前本地查看数据和站点的渲染,执行命令

    用于在开发模式下运行应用。 打开 http://localhost:3000 在浏览器中查看。如果你进行了编辑,页面将重新加载。 你还将在控制台中看到任何 lint 错误。

npm start

image.png

2) 推送到 master 分支

此时从本地看数据和页面如果都没有什么问题,那么可以先推送到 master 分支。

这里推荐两种操作方式二选一。

方式一:用 OpenLinkSaaS 操作

  • 添加并提交有变化的文件 image.png

  • 把提交了变更的数据推送到 AtomGit 远端仓库 image.png

  • 检查更新成功 image.png image.png

方式二:用 Git 命令操纵

分别执行命令

git add ./
git commit -m '更新说明'
git push

3) build

  • npm run build,此时会产生的静态文件都将会在 "build目录"中。

4) 切换到build分支,执行静态文件编译

从此处开始,操作都将会在build 分支操作。

4-1)这里推荐两种操作方式二选一。

方式一:用 OpenLinkSaaS 操作 image.png

  • 接着手动删除“build目录”和“.gitignore”文件之外的所有文件。
  • 手动把“build目录”里面的所有内容都移动到“build目录”之外,也就是和“build目录”同级别。再把“build目录”删除。 17dd5850df728b8e0743967d8a372f8.png

推送到远端 AtomGit 上的 build 分支

  • 添加&提交 image.png

  • 把提交了变更的数据推送到 AtomGit 远端仓库 image.png image.png

  • 检查更新成功 image.png

方式二:用 Git 命令操作

git checkout build
  • 接着手动删除“build目录”和“.gitignore”文件之外的所有文件。
  • 手动把“build目录”里面的所有内容都移动到“build目录”之外,也就是和“build目录”同级别。再把“build目录”删除。 17dd5850df728b8e0743967d8a372f8.png

推送到远端 AtomGit 上的build 分支

git add .
git commit -m '更新说明'
git push
  • 检查更新成功 image.png

5、访问远端仓库地址查看更新

  • 访问仓库地址,查看是否更新了数据。
  • 如果没有请进入仓库的“设置”->"Pages",手动点击下“保存”按钮,将会更快的刷新最新的数据。如下图。 b755add1ec515c4a77aeacbebb1a8ea.png

以上。