程序员经验分享-hwhale

基于 Github/Gitee Pages 服务+ Hexo框架搭建静态博客

2023-05-16

基于 Github/Gitee Pages 服务+ Hexo框架搭建静态博客

文章目录

  • 基于 `Github`/`Gitee Pages` 服务+ `Hexo`框架搭建静态博客
    • 前言：要知道些什么呢？
      • `一：Pages 服务是啥:`
      • `二：Hexo 框架又是个啥`：
    • 正式开始建站啦：
      • `一：环境的配置：`
        • 1、安装Node.js
        • 2、安装Git:
        • 3、安装Hexo并初始化：
      • `二：将博客部署到 Github/gitee Pages 上`
        • 1、注册GitHub /gitee 账户：
        • 2、创建项目代码库
        • 3、配置 SSH 密钥
        • 4、将本地的 Hexo 文件更新到 GitHub 的库中
      • `三：博客主题相关：`
        • 1、主题选择与更换
        • 2、我踩过的坑：
        • 3、附录：

😁博客预览：好久没读诗了啊 欢迎来玩。

前言：要知道些什么呢？

一：Pages 服务是啥:

代码托管网站将用户的仓库文件以网页形式发布，这就是「Pages」。在 Pages 服务中，代码仓库中的是网站的源文件，托管平台的服务器扮演了远程主机的角色，为了让网页能够正常访问，托管平台提供域名、证书等「配件」。利用这一服务，开发者可以高效地建立项目主页，或者个人博客。

在国内提供 Pages 服务的代码托管平台主要有微软旗下的 GitHub，开源中国旗下的 Gitee (码云)和与腾讯合作的 Coding。三个平台的基础功能包括 Pages 的使用都是免费的🙄。

开通条件如下：

在这里插入图片描述
配套服务对比表格如下：访问体验：在这里插入图片描述
配套服务对比表格如下：
在这里插入图片描述
综上，GitHub除了访问速度比较慢（地区差异，博主使用GitHub部署的访问速度还可以：静态网站不同于动态。）优势比较明显：自定义域名不收费，自己购买的域名不同于gitee通过收费获得自定义域名功能之后还需要进行’‘复杂漫长’'的备案环节；自动化部署，通过git上传到库就不用自己手动更新了，不像隔壁的gitee花钱。😅Coding因为它容易崩，更重要的是我没实际操作过。

二：Hexo 框架又是个啥：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

Hexo 官方提供了各式各样的主题，而且使用人数很多，以后遇到问题或者是有关博客的美化环节可以借鉴他人的相关操作。且有很多插件可以使用，持支一键部署；可以去Hexo官网了解呀。

正式开始建站啦：

一：环境的配置：

必要的环境的配置：Git方便我们把本地文件部署到GitHub；Hexo是一个基于Node.js的静态博客框架，因此需要先安装Node.js环境

1、安装Node.js

Node.js官网：按照默认步骤进行安装

2、安装Git:

进入Git官网Git官网，点击 Downloads 下载：
在这里插入图片描述
参考资料😏：《如何在windows下安装GIT》
　　　 　　《Pro Git（中文版）》

检验Git是否安装成功：

同时按下 Win 键和 R 键打开运行窗口,输入 cmd ，然后输入以下命令，有相应版本信息显示则安装成功，若不正确可以卸载软件重新安装，此外若安装成功，在桌面右键鼠标，可以看到菜单里多了 Git GUI Here 和 Git Bash Here两个选项，第一个是图形界面的Git操作，另一个是命令行：

 $ git --version  
 $ node -v  
 $ npm -v

在这里插入图片描述

3、安装Hexo并初始化：

选择一个磁盘，新建一个文件夹，自己重命名文件夹（如：Blog），博客相关文件将储存在此文件夹下，在该文件夹下右键鼠标，点击 Git Bash Here，输入以下 npm 命令即可安装，第一个命令表示安装 hexo，第二个命令表示安装 hexo 部署到 git page 的 deployer（插件），如图所示即为安装成功

 $ npm install hexo-cli -g  
 $ npm install hexo-deployer-git --save

在这里插入图片描述
Hexo 初始化配置：

进入我们刚创建的Blog文件夹下鼠标右击，点击Git Bash Here，输入 hexo init命令：
在这里插入图片描述
Hexo 安装完成后，将会在指定文件夹中新建所需要的文件，Hexo 文件夹下的目录如下：在这里插入图片描述

查看本地效果：

执行以下命令，执行完即可登录 http://localhost:4000/ 查看效果

 $ hexo generate  
 $ hexo server

显示以下信息说明操作成功：

 INFO Hexo is running at http://0.0.0.0:4000/. Press Ctrl+C to stop.

登录 http://localhost:4000/ 查看效果：在这里插入图片描述

二：将博客部署到 Github/gitee Pages 上

到目前为止，我们的本地博客就成功搭建了，但是现在我们只能通过本地连接查看博客，我们要做的是让其他人也能够访问我们的博客，这就需要我们将博客部署到Github Pages上。

1、注册GitHub /gitee 账户：

你肯定会😁 GitHub Gitee

2、创建项目代码库

点击 New repository 开始创建，步骤及注意事项见下图：（gitee 差不多）在这里插入图片描述

3、配置 SSH 密钥

通过配置 SSH 密钥我们能够更方便的实现本地代码库与 Github 代码库同步；当然，您也可以选择不配置SSH密钥而使用HTTPS连接来部署Blog，副作用是每次提交都需要输入托管网站的账号密码。

我们在新建的文件夹（Blog)中右键打开 Git Bash：输入 ssh-keygen -t rsa 命令**（注意空格）**，表示我们指定 RSA 算法生成密钥，然后敲四次回车键，之后就就会生成两个文件，分别为秘钥 id_rsa 和公钥 id_rsa.pub. 文件的位置在 Git Bash 上面都有显示，默认生成在以下目录

Linux 系统：~/.ssh
Mac 系统：~/.ssh
Windows 10 ：C:/Users/用户名/.ssh

在 GitHub 账户中添加你的公钥：

① 登陆 GitHub，进入 Settings：
在这里插入图片描述
②选择选择 New SSH key：
在这里插入图片描述
③将复制的公钥 id_rsa.pub 的内容粘贴到 key 内，再点击 Add SSH key如下图：
在这里插入图片描述
④测试：我们可以通过在 Git Bash 中输入 ssh -T git@github.com 进行检验：
在这里插入图片描述输入 yes 后会显示：在这里插入图片描述

⑤配置个人git 信息

Git 会根据用户的名字和邮箱来记录提交，GitHub 也是用这些信息来做权限的处理，输入以下命令进行个人信息的设置，把名称和邮箱替换成你自己的，名字可以不是 GitHub 的昵称，但为了方便记忆，建议与 GitHub 一致。

 $ git config --global user.name "此处填你的用户名"  
 $ git config --global user.email  "此处填你的邮箱"

到此为止 SSH Key 配置成功，本机已成功连接到 Github。

4、将本地的 Hexo 文件更新到 GitHub 的库中

① 登录 Github 打开自己的项目 your name.github.io

② 鼠标移到 Clone or download 按钮，选择 Use SSH（假装您配置了SSh:真的方便)
在这里插入图片描述
③打开你创建的 Blog文件夹，右键用记事本（Notepad++或者VS code等都可以）打开该文件夹下的 _config.yml 文件
在这里插入图片描述
④配置Hexo:下滑到_config.yml文件底部，填上如下内容：

🙄假装您配置了SSH密钥：
😑如果仅仅只是用GitHub pages 服务我们可以填写：
deploy:
  type: git
  repository: git@github.com:{yourname}/{yourname}.github.io.git  #你的仓库地址SSH 
  branch: master
😐GitHub和Gitee都配置（建议，前提你都有仓库了啊）
deploy:
  type: 'git'
  repo: 
    github: git@github.com:{yourname}/{yourname}.github.io.git
    gitee: git@gitee.com:{yourname}/{yourname}.git
  branch: master

⑤至此，您已经完成了将Hexo的静态网站同步部署至Github与码云(Gitee)的全部步骤。
一如既往，让我们通过。

hexo clean   #清除缓存文件 db.json 和已生成的静态文件 public
hexo g       #生成网站静态文件到默认设置的 public 文件夹(hexo generate 的缩写)
hexo d       #自动生成网站静态文件，并部署到设定的仓库(hexo deploy 的缩写)

⑥访问博客

你的博客地址：https://你的用户名.github.io，现在每个人都可以通过此链接访问你的博客了。

⑦写博客

新建一个空文章，在Blog下 git bash 输入以下命令

 $ hexo n "文章标题"

程序会在我们的 \Blog\source \ _posts中生成 文章标题.md 文件，用Markdown编辑器修改文章内容即可。

当我们用编辑器写好文章后，可以使用以下命令将其推送到服务器上

hexo clean   
hexo g      
hexo d

现在访问你的博客就可以看见写好的文章啦！

三：博客主题相关：

现在博客也搭建好了，但是这样光秃秃的什么也没有不好看，是时候美化一波了！

1、主题选择与更换

①我们进入Hexo 官网的主题专栏：
在这里插入图片描述
②选择一个主题进入其GitHub的仓库 以NexT为例

打开博客根目录Blog文件夹，右键Git Bash，输入如下代码将next主题下载到目录Blog/themes：

git clone https://github.com/theme-next/hexo-theme-next themes/next 克隆这个原始主题库

在这里插入图片描述
③主题和站点的相关配置美化：

先敲响警钟：根目录Blog和主题文件next下都有一个_config.yml的配置文件，区分开来：站点配置文件和主题配置文件。😭不要踩坑 啊

打开根目录下的_config.yml(称为站点配置文件)，修改主题（注意冒号后都要有空格）：（推荐vscode编辑器）

🙄看英文单词 ：这是网站标题这一块：
# Site   
title: 好久没读诗了啊
subtitle: 写点什么
description: 昼眠听风，夜坐听雨
keywords:
author: Serendipity
language: zh-CN
timezone: Asia/Shanghai
🙄网站主题这一块：
# Extensions  
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next   #主题改为next
 以后修改站点的配置就可以在这个问价里面修改了

主题语言主要是看你的themes/next/language中的简体中文是 zh-CN 还是 zh-Hans：
在这里插入图片描述
next主题有四种，如下图依次为Muse、Mist、Pisces、Gemini。
我选的是Gemini，打开目录Blog/themes/next/下的_config.yml（称为主题配置文件），只要将你选的主题前的#删除就行了：

# Schemes
#scheme: Muse
#scheme: Mist
#scheme: Pisces
scheme: Gemini    #这是我选的主题

回到根目录打开Git Bash，输入如下三条命令：

hexo clean
hexo g
hexo d

完成后打开你的博客：在这里插入图片描述

2、我踩过的坑：

其他的美化就可以网上照着弄了就可以了。

之要每一次更改内容都要以hexo clean hexo g ，然后 hexo s本地预览一下效果是否完成了，一步一步的来，避免慌慌张张思路不清晰的弄坏了配置无法打开了 还得重新开始。😭

自由发挥吧。。🙄

3、附录：

持续更新

①购买域名：阿里云摸索着买。

②域名的解析：

  • 登录阿里云，点击控制台，在你已购买的域名后点击解析添加两条解析记录：
    在这里插入图片描述
    在这里插入图片描述
  • 那个IPV4地址可以通过ping得到，具体方法是：打开cmd输入下面命令：
ping 你的账户名.github.io    #ping + 你的GitHub的网址

在这里插入图片描述

  • 打开 Blog 文件夹里的 source 文件夹，添加CNAME文件，可以先创建一个CNAME.txt文件，打开后写上你的域名，不要加www否则每次访问都必须加www，但如果不带有www，以后访问的时候带不带www都可以访问，保存后记得要重命名，将.txt删除，如下图：在这里插入图片描述
  • 第三步回到 Blog 文件夹，右键打开 Git Bash，依次输入下面三条命令：
hexo clean
hexo g
hexo d
  • 打开GitHub，看看CNAME文件是否已经在你的项目中，点击 settings ：
    在这里插入图片描述
  • 如果你没有CNAME文件，可以自己在GitHub仓库里面添加这个文件。

🤣哈哈哈哈哈 我觉得图床什么的可以直接把文章先放在CSDN 。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

GitHub

Gitee

Pages

hexo

框架搭建静态博客

基于 Github/Gitee Pages 服务+ Hexo框架搭建静态博客 的相关文章

  • git 推送到 github 失败并显示“错误：pack-objects 因信号 967 死亡”

    我触发了这个命令 git push origin master 我得到这个结果 Counting objects 15626 done Delta compression using up to 4 threads error pack o

  • 在 github 操作中部署到 PR 上的 Firebase 托管失败

    我尝试使用 firebase 创建实时预览 我写yml文件及其始终失败 This file was auto generated by the Firebase CLI https github com firebase firebase

  • 无法访问 Github 403 错误：权限被拒绝

    我是 Git Github 的新手 所以请原谅我的困惑 问题是 我刚刚对本地存储库进行了更改 并且想推送到 Github 上的原点 特别是 gh pages 之前 我一直在使用另一个 Github 帐户 因此我更改了 user name 和

  • 如何使用 env 变量作为 github actions 中输入的默认值？

    我有一个 github 操作 它有一个输入 该输入应该具有基于 env variable 的默认值 因为 github actions 不支持环境变量default字段 我想知道是否可以在我的 action yml 文件的步骤部分中重新分配

  • 包括来自raw.github.com的js

    我有一个 github com 演示页面 链接到https raw github com master file js https raw github com master file js这样我就不需要总是复制 js文件转移到gh pag

  • 为什么 git 无法识别我的本地存储库？

    我刚刚回到一个我已经使用 Git 大约 6 个月的项目 看到了这个 cd d DEVELOP BlenderAe My repo root git status fatal not a git repository or any of th

  • 如何使用 PyGithub 创建新存储库

    如何使用 PyGithub 在 Github 上创建新的存储库 我特别想知道如何使用create repo http jacquev6 net PyGithub v1 github objects AuthenticatedUser htm

  • 返回到 Github Desktop 中的上一个提交

    我正在尝试使用 GitHub Desktop 即 GUI 应用程序 而不是命令行 返回到先前的提交 在同一分支上 我认为这是一个核心功能 因为它是首先使用源代码控制的主要原因 我可以看到可以恢复提交 但这并不是我真正想要的 因为它创建了一个

  • 无法从另一台计算机访问 git 分支

    基本上我看不到另一台计算机上的分支 我跑 git branch a 在家用电脑上我得到 C learn ror sample app filling in layout gt git branch a filling in layout m

  • 如何从 github 安装需要构建步骤的 npm 包，例如什么时候分叉一个库？

    假设您使用类似的库vue3 datepicker https www npmjs com package vue3 datepicker 您意识到您需要自定义某些内容 并且作为第一步 您想要使用它的自定义分支 问题是 当包被推送到 npm

  • 使用 SourceTree 克隆存储库

    有人可以给我一个简单的使用 SourceTree 克隆存储库的快速演练吗 在书签中 我单击克隆存储库 对于源路径 我粘贴如下所示的 URL 电子邮件受保护 cdn cgi l email protection 客户端 应用程序名称 ios

  • 无法在 git 上获取 Http 工作

    我在拇指驱动器上使用 gitbash 作为 git 我的防火墙阻止了我 并且想设置我的 git 以进行 http 访问 我使用 github 并且已经看到了有关如何执行此操作的各种信息 但我还不够了解 无法让它为我自己工作 我在 php i

  • Git 用户配置文件 - 自定义忽略

    我们有一个由 5 名开发人员组成的团队致力于硬件项目 我们有一个 user config h 文件 其中包含每个用户的特定环境和偏好的 defines 例如他们使用的硬件版本 是否应该打开声音等 目前 该文件位于我们的 gitignore

  • 获取 git 存储库中每个文件的提交计数

    我正在寻找一种方法来查看有关 git 存储库中每个文件更改频率的统计信息 基本上 文件提交的频率实际上与以前的版本不同 此外 有没有办法获取文件上次更改的日期 我是一个 git 新手 还没有发现任何关于此的信息 任何帮助将不胜感激 这里有两

  • 配置 Eclipse/EGit 来跟踪上游存储库

    我正在使用 EGit 如新的 Eclipse 4 2 Juno 版本中提供的 我在 GitHub 上有一个存储库 是从另一个上游存储库分叉的 当我从 Github 上的存储库在 Eclipse 中创建项目时 它正确设置origin指向 Gi

  • app-release-unsigned.apk 未签名

    我在 github 上下载了 Android 应用程序的 zip 文件 并尝试运行它 但出现一个包含此消息的对话框 app release unsigned apk is not signed Please configure the si

  • 无法在 Eclipse 中运行从 Git 导入的项目

    我的 Eclipse 工作区中有一个来自 Github 的项目 通过 File gt Import gt Projects from GIT 但是 我无法运行该示例 因为 运行方式 下的唯一选项是 运行配置 转到 运行配置 后 我单击 浏览

  • 将 git 存储库拆分为压缩的公共和初始私有

    我想在 Github 上开源一个项目 有相当多的提交 超过 2k 我会将它们压缩成一个 初始提交 以便从一个干净的代码库开始并隐藏一些历史内容 问题是 是否有可能 保留一个包含所有初始提交的私有存储库 其中会有一些秘密密钥 travis c

  • 从另一个分支或从 master 创建 Git 分支？

    所以我是 Git 新手 我最近从存储库中提取了主分支的新版本 我创建了一个branch 1 获取某个功能并将其推送到存储库并创建拉取请求 现在我创建了一个新的branch 2 具有另一个功能 但由于我的拉取请求尚未合并 再次拉取 maste

  • 如何将Github中的develop分支设置为默认分支而不是master？

    我知道这可以在存储库的管理页面上完成 可以在那里设置另一个默认分支 这就是这个问题的答案 但我发现 也许是一个错误 以下内容 如果你的master分支和develop分支完全相同 那么git克隆将不会克隆默认的 develop 分支 但仍然

随机推荐

热门标签