本文是云端生活系列的一部分，详细介绍了如何使用 GitHub Pages 从零开始创建个人博客的完整过程。内容包括注册 GitHub 账号、配置 Pages 网站、绑定自定义域名，以及利用 Jekyll 进行博客的简单定制。文章以实用性为核心，通过详细的步骤和示例帮助读者轻松掌握 GitHub Pages 的使用技巧，开启属于自己的云端博客之旅。无论是初学者还是进阶用户，都能从中找到实用的解决方案！

引言

在开源时代，GitHub不仅仅是代码的托管平台，它还是一个普通人轻松实现个人博客梦想的地方。不需要高超的技术，只需几个步骤，就可以将自己的想法永久记录在互联网上。本篇文章将带您创建个人博客，开启属于自己的云端生活。

本文是云端生活系列的一部分。如果您尚未注册GitHub账号，请参考我们之前的文章：GitHub实用指南：打开云端协作新世界。

前期准备

1. 注册GitHub账号

  1. 访问 GitHub官网。
  2. 点击右上角“Sign Up”按钮。
  3. 按提示填写信息：
    • 电子邮箱
    • 密码
    • 用户名（将出现在您的博客地址中，请尽量选择简短、个性化的名称）。
  4. 完成邮箱验证并登录。

提示：详细注册步骤请查看GitHub实用指南：打开云端协作新世界。

2. 工具推荐

为了简化后续操作，我们强烈推荐安装 Visual Studio Code（VS Code），它是一个强大的代码编辑器，可以帮助您更方便地管理和编辑博客内容。后续我们将推出 VS Code 的安装与使用教程，敬请期待。

创建GitHub Pages网站

GitHub Pages 是一个强大的工具，可以通过简单的设置将 GitHub 仓库变成一个托管的静态网站。以下是创建 GitHub Pages 的具体步骤：

1. 创建仓库

  1. 登录 GitHub 后，点击页面中间的 “Github Pages”。
  2. 在github-pages页面中往下拖动，找到并点击绿色按钮"Start course"。

  3. 在创建新仓库“Create a new repository”中点击绿色按钮“Create repository”，如果需要自定义相关选项的，可以自行输入比如仓库名称、描述等，本次演示均使用默认设置。

2. 设置Pages网站

  1. 完成仓库创建后，可以自行根据Github的操作步骤进行设置，这里先点击这个仓库的设置“Settings”，再点击左侧功能中的“Pages”，之后画面中均需要注意红色箭头。

  2. 依次点击分支“Branch”中的“None”，选中“main”分支，再点击右侧的保存“Save”按钮。

  3. 之后的画面需要稍等，会从以下的画面1切换到画面2，其中画面2中红框会显示出你的网址，这个网址就是你的博客地址，可以通过这个地址访问你的博客。

  4. 如果成功设置的，再次回到仓库主页，你会看到Github给出的后续的步骤，注意这时候访问刚才的链接，可能会报错，我们这里先暂时继续完成后续的步骤。

3. 编辑网站内容

  1. 让我们回到这个仓库的主页，点击“main”分支，选择“My-pages”分支，再点击“_config.yml”文件，点击编辑按钮，并按照屏幕内容输入“theme: minima”后，点击2次“Commit changes”，。




  2. 同样的操作，也可以编辑“index.md”文件，依次点击文件，编辑，输入内容，提交更改（点击2次“Commit changes”），这些更改的内容都将在最后的网页中呈现。


  3. 再次回到仓库的主页，点击“my-pages”分支旁的加号“+”，在文件名处输入“_posts/2024-12-25-zr.md”，在文件内容处按格式输入，之后再点击“Commit changes”：



4. 提交更改

  1. 完成后回到仓库主页，点击仓库上方的“Pull requests”，再点击“New pull request”，注意选择红框中的“my-pages”，再点击2次“Create pull request”，再点击“Merge pull request”，再点击“Confirm merge”，成功后点击“Delete branch”删除“my-pages”分支。









  2. 这时再回到仓库主页，就能看到停留在“main”分支的完整的项目文件了，下方还有“Github Pages”已经设置完成的提示。如果你一直跟着上面的步骤操作，这时候已经能访问网址了，具体地址是“用户名.github.io/skills-github-pages”，刚才在第8步和第9步设置的内容能正常显示，你也可以试着用刚才的方法更改其中的内容。


  3. 至此为止，你已经成功创建了一个GitHub Pages网站，可以通过网址访问你的博客，也可以通过客户端的VS Code等工具编辑你的博客内容。建议查看GitHub Pages的官方文档，了解更多关于GitHub Pages的内容。

自定义域名绑定

默认情况下，您的博客地址是 https://username.github.io/skills-github-pages，如果希望使用更具个性化的域名，可以参考以下步骤。

申请免费域名

推荐通过 eu.org 申请一个免费的域名，具体步骤可以关注我们以后的教程，申请批准后，您将获得一个类似 yourname.eu.org 的域名，比如我的域名是 arong.eu.org，设置DNS指向Cloudflare的服务器。

配置域名托管到 Cloudflare

注册并登录 Cloudflare，添加您的域名到 Cloudflare 并完成 DNS 验证，如果对这个步骤不熟悉的，请关注我们后续的教程。

在Github Pages中配置自定义域名

  1. 如果你已经完成了上述的域名申请并成功托管到了Cloudflare，那么可以在Cloudflare中完成DNS设置，增加4条A记录和1条CNAME记录就可以了，其中A记录的值是Github Pages的IP地址，CNAME记录的值是Github Pages的网址，这个网址应该是“username.github.io”。
  2. 回到Github项目仓库的Pages设置，在Custom domain中输入你的域名，点击Save保存。


    成功后在Github项目仓库的Pages中会显示如下画面：
  3. 这时候，你就可以使用你的域名访问你的博客了，比如我的域名是“arong.eu.org”，那么访问“arong.eu.org”就能访问到我的博客了。

使用Jekyll构建博客

为了让博客更具个性化，您可以使用 Jekyll 和丰富的主题插件对你的博客进行定制操作。

1. 启用 Jekyll

GitHub Pages 自带 Jekyll 支持，无需额外安装，按照我们之前的步骤，已经完成了最简单的Jekyll设置。
Jekyll的介绍和使用方法可以参考Jekyll的Github仓库。

2. 使用主题插件

  1. Jekyll支持丰富的主题插件，您可以在 Jekyll Themes 中选择适合的主题，我们以后将介绍这部分的内容。
  2. 使用主题后，你的博客将拥有更加美观的外观，更加丰富的功能，比如搜索、评论等，以下是使用了Chirpy主题的演示网站。

3. 使用VS Code和相关插件进行深度定制

虽然本篇文章未深入探讨主题美化，但以下是使用 Chirpy 主题创建的博客页面效果图，您可以借助 VS Code 编写符合标准的 Front Matter 语法，并通过 WordPress 插件 Git it Write 实现跨平台更新。比如当你完成了一篇博文后，你可以通过VS Code和相关插件，实现同时在两个不同的域名上更新博文，附件提供了博文的Front Matter语法可以参考。

总结与展望

通过以上步骤，您已经成功创建了属于自己的 GitHub Pages 博客。从基础的配置到个性化的域名，再到简单的 Jekyll 定制，这一切都是云端生活的起点。

后续计划：

  • 如何通过 VS Code 深度管理博客内容。
  • 免费域名申请与托管到Cloudflare的教程。
  • 使用 WordPress 与 GitHub Pages 同步更新的进阶指南。

欢迎在评论区分享您的博客作品或疑问，让我们一起在云端生活中成长！

好了，今天就到这里，如果你对本文中的内容有兴趣，欢迎在评论区分享您的高见。

如果你觉得我的文章对你有帮助，可以请我喝咖啡

请我喝咖啡

💬 发表评论: 本博客的评论功能由 Gitalk 提供，您需要有一个 GitHub 账号来发表评论。如果您还没有账号，请访问 GitHub 免费注册。注册后，您不仅可以在这里参与讨论，还可以在 GitHub 上发现无数精彩项目和技术交流的机会！

附件：同步更新github pages和wordpress网站文章的Front Matter语法样例


---
# layout: post
title: "VPS管理指南：掌握PuTTY与WinSCP的协同魔法"
date: 2024-04-27 11:17:48 +0000
categories: [技术实践, 工具]
tags: [vps, putty, winscp, ssh, telnet, linux]
pin: false
image:
  # 1200px*630px，860px*780px
  path: "/assets/img/202404/puttywinscp.png"
  lqip: "/assets/img/202404/puttywinscp.png"
  alt: "两款管理VPS的神器Putty和WinSCP"
# 以下文章中涉及的所有的图片均需要增加alt描述

# 下面是WordPress插件Git it Write的字段
post_status: publish
# post_status: draft
post_excerpt: 两款管理VPS的神器Putty和WinSCP
featured_image: /assets/img/202404/puttywinscp.png
taxonomy:
  category:
    - 技术实践
    - 工具
  post_tag:
    - vps
    - putty
    - winscp
    - ssh
    - telnet
    - linux
# custom_fields:
# field1: value 1
# field2: value 2
comment_status: open
stick_post: no
---