【項目實戰】使用Github pages、Hexo如何10分鐘內快速生成個人博客網站

文章目錄

  • 一.準備工作
    • 1.安裝git
    • 2.安裝node
      • 安裝 cnpm
    • 3.使用 GitHub 創建倉庫，并配置 GitHub Pages
      • 0.Github Pages是什么
      • 1. 在 GitHub 上創建一個新倉庫
      • 2. 創建您的靜態網站
      • 3. 啟用 GitHub Pages
      • 4. 等待構建完成
      • 5. 訪問您的網站
  • 二. Hexo
    • 1.什么是Hexo
    • 2.安裝Hexo
        • 1. 安裝前提
        • 2.使用npm安裝hexo-cli
        • 3.新建存儲博客的文件夾，初始化hexo
        • 4.進入hexo項目文件夾，安裝npm**
        • 5. 本地啟動hexo項目
        • 6.將hexo博客站點部署到github上
        • 7. 推送hexo項目到github
          • hexo clean && hexo deploy 推送報錯解決
    • 3.Hexo常用命令
    • 4.更換theme主題
        • 1. 找到喜歡的主題
        • 2.clone主題，或者將主題下載到本地解壓
        • 3. 將主題解壓后放到Hexo項目的`themes文件夾`下面
        • 4. 打開`_config.yml`配置文件，找到`theme:xxx`替換成你克隆下來的文件名
        • 5. 重新編譯，并本地啟動hexoo該hero項目
        • 6. 本地ok后上傳到github等待審核通過
  • 三.配置指南
    • 1._config.yml中設置網站信息
    • 2.配置分類、標簽
      • 2.1.創建分類選項
      • 2.2. 創建標簽選項
      • 2.3.打開你要部署的md文件
    • 3.hexo報錯解決方案

一.準備工作

1.安裝git

git下載地址：https://git-scm.com/downloads

  • git安裝完成后命令行執行 git -v 有返回表示安裝完成

在這里插入圖片描述

2.安裝node

Hexo 基于 NodeJS 運行，因此在開始前，需要安裝NodeJS 和npm工具

  • Node.js (Node.js 版本需不低于 10.13，建議使用 Node.js 12.0 及以上版本)

    • 新版的Node都是內置安裝了 npm 模塊

  • git安裝完成后命令行執行 node -v npm -v 有返回表示安裝完成
    在這里插入圖片描述

  • 如果執行 node -v 報錯的話，手動將 Node.js 的安裝路徑添加到環境變量中。

安裝 cnpm

如果npm很慢，可以配置taobao的鏡像：

	npm install -g cnpm --registry=https://registry.npm.taobao.org

配置后，使用 cnpm 代替 npm 命令即可。

3.使用 GitHub 創建倉庫，并配置 GitHub Pages

0.Github Pages是什么

  • Github Pages 是一個免費的靜態網頁托管服務，可以托管博客、項目官網等靜態網頁。目前 Gitee Pages 支持 Jekyll、Hugo、Hexo編譯靜態資源。

    • 編譯 Hexo 依據：倉庫編譯目錄下存在 package.json、_config.yml文件和 scaffolds 目錄時，會使用hexo generate生成靜態文件。由于每次部署需要重新克隆代碼、執行 npm install 以及編譯，部署時間相對于 Hugo 和 Jekyll 會長一些。

    • 編譯 Hugo 依據：倉庫編譯目錄下存在config.toml|json|yaml文件和 content 目錄時，會使用hugo生成靜態文件。

    • 當不符合上述 1 和 2 條件的時候，就使用 Jekyll 編譯。

2.使用前須知

    1. 倉庫必須有 index.html 才可以正常訪問
    1. 靜態網頁的樣式可以自己寫，也可以拿一些靜態模版來修改，Pages服務本身不提供任何形式的模版

3.Pages 進階，使用 Jekyll、Hugo、Hexo 生成自己的靜態網頁

  • Jekyll、Hugo、Hexo 究竟是什么？
    在這里插入圖片描述

    • Jekyll 使用文檔：https://www.jekyll.com.cn/docs/home/
    • Hugo 使用文檔：https://gohugo.io/documentation/
    • Hexo 使用文檔：https://hexo.io/docs/

1. 在 GitHub 上創建一個新倉庫

登錄到您的 GitHub 賬戶（沒有就注冊一個吧，開始你的GitHub之旅）

  • 在頁面右上角，點擊頁面頂部的 “+”（加號）按鈕，然后選擇 “New repository”（新建倉庫）

  • github倉庫用于存放個人博客頁面，倉庫名必須使用<GitHub用戶名>.github.io格式。

  • 填寫一個簡短的描述，選擇是否要將倉庫設置為公共或私有
    在這里插入圖片描述

  • 勾選 “Initialize this repository with a README” 選項，這將創建一個初始的README文件
    在這里插入圖片描述

2. 創建您的靜態網站

  • 創建倉庫完成后，必須在倉庫根路徑下創建一個名為index.html的來驗證個人博客搭建是否成功。

在這里插入圖片描述
在這里插入圖片描述

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>怎么回事</title></head><body><h1>您好</h1>

3. 啟用 GitHub Pages

  • 進入倉庫的 Settings（設置）選項卡
  • 在左側導航欄中，選擇 “Pages”
  • 在 “Source” 部分，選擇您希望用于 GitHub Pages 的分支（通常是 main 或 gh-pages）
  • 點擊 “Save”
    在這里插入圖片描述

4. 等待構建完成

構建完成后， 在<GitHub用戶名>.github.io倉庫對應的 GitHub Pages 設置頁面 (訪問路徑為Settings -> Pages) 可以找到個人博客的主頁訪問地址：https://<GitHub-username>.github.io/<repository-name>

  • 其中 GitHub-username 是您的 GitHub 用戶名，repository-name是您的倉庫名稱。
    • 由于我的倉庫名叫ouyangll.github.io ，自帶.github.io 所以生成的個人博客訪問地址為https://ouyangll.github.io/
      在這里插入圖片描述

5. 訪問您的網站

  • 等待幾分鐘后，若能在瀏覽器中正常訪問該地址，即代表個人 GitHub Pages 搭建成功。

在這里插入圖片描述

二. Hexo

1.什么是Hexo

Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown（或其他標記語言）解析文章，在幾秒內，即可利用靚麗的主題生成靜態網頁。

  • 官方教程:https://hexo.io/zh-cn/docs/

2.安裝Hexo

1. 安裝前提
  • Node.js (Node.js 版本需不低于 10.13，建議使用 Node.js 12.0 及以上版本)
  • Git
2.使用npm安裝hexo-cli
npm install -g hexo-cli 或者
npm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install -g hexo-cli
  • 安裝完成可輸入hexo -v查看版本
3.新建存儲博客的文件夾，初始化hexo
mkdir github_blog
hexo init github_blog
4.進入hexo項目文件夾，安裝npm**
cd github_blognpm install

在這里插入圖片描述

5. 本地啟動hexo項目
hexo server

訪問http://localhost:4000/ 至此hero就搭建好了。可以在本地訪問了

6.將hexo博客站點部署到github上
  1. npm安裝hexo的上傳插件deploy-git
npm install hexo-deployer-git --save
  1. 修改hexo配置文件_config.yml指定倉庫路徑
		deploy:type: gitrepo: https://<github_token>@github.com/ouyangll/ouyangll.github.io.gitbranch: main
7. 推送hexo項目到github
hexo clean && hexo deploy

推送中會要求輸入github的用戶名和密碼，GitHub 從 2021 年 8 月 13 日起不再支持通過密碼進行認證。因此，使用電子郵件和密碼的方式克隆或推送代碼到 GitHub 倉庫將會失敗。

hexo clean && hexo deploy 推送報錯解決

在這里插入圖片描述

  • GitHub 從 2021 年 8 月 13 日起不再支持通過密碼進行認證。因此，使用電子郵件和密碼的方式克隆或推送代碼到 GitHub 倉庫將會失敗。

  • 推薦使用個人訪問令牌（Personal Access Token, PAT）或 SSH 密鑰進行認證。你可以前往 GitHub 的設置頁面，生成一個 PAT，并在 Git 命令中使用它來代替密碼

    • 請查看 https://docs.github.com/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls 以獲取當前推薦的認證模式信息。

  • 致命錯誤：出現問題。也許您可以在這里找到解決方案：https://hexo.io/docs/troubleshooting.html

  1. 在github頁面的右上角，單擊您的個人資料照片，然后單擊 Settings（設置）

    在這里插入圖片描述

  2. 在左側邊欄中，單擊 Developer settings
    在這里插入圖片描述

  3. 在左側邊欄中，單擊 Personal access tokens（個人訪問Tokens） 然后點擊 Generate new token（生成新Tokens）
    在這里插入圖片描述
    在這里插入圖片描述

  4. 設置token名稱，過期日期，以及權限。
    在這里插入圖片描述

  5. 點擊生成
    在這里插入圖片描述
    在這里插入圖片描述

  6. 記得將生成的token復制并且存儲下來，因為安全原因當您離開該頁面之后，token將不再顯示。

你在github上的原始url： https://github.com/<github-username>/<repo-name>.git而你現在需要clone的則是：https://<your_token>@github.com/<github-username>/<repo-name>.giy
  • 也可以在密碼登錄時使用token作為密碼進行登錄認證

上傳成功
在這里插入圖片描述

3.Hexo常用命令

  1. hexo init： 命令用于初始化一個本地文件夾為網站的根目錄

  2. hexo new <title > 新建一篇文章

  3. hexo clean 命令用于清理緩存文件
    在這里插入圖片描述

  4. hexo generate：該命令用于生成靜態文件，可以簡寫成 hexo g
    在這里插入圖片描述

  5. hexo deploy 命令用于部署網站，上傳文件到git/gitee 可以簡寫成 hexo d

  6. hexo server 命令用于啟動本地服務器，可以簡寫成 hexo s

    • -p 選項，指定服務器端口，默認為 4000
    • -i 選項，指定服務器 IP 地址，默認為 0.0.0.0
    • -s 選項，靜態模式 ，僅提供 public 文件夾中的文件并禁用文件監視

  7. hexo --safe 表示安全模式，用于禁用加載插件和腳本

  8. hexo --debug 表示調試模式，用于將消息詳細記錄到終端和 debug.log 文件

4.更換theme主題

1. 找到喜歡的主題

hexo主題地址：Themes | Hexo
在這里插入圖片描述
在這里插入圖片描述

2.clone主題，或者將主題下載到本地解壓

https://github.com/zhangolve/hexo-theme-olive
在這里插入圖片描述

3. 將主題解壓后放到Hexo項目的themes文件夾下面

在這里插入圖片描述

4. 打開_config.yml配置文件，找到theme:xxx替換成你克隆下來的文件名

在這里插入圖片描述

在這里插入圖片描述

5. 重新編譯，并本地啟動hexoo該hero項目
cd github_blog 進入hexo項目
hexo generate 生成靜態文章
hexo server 本地啟動

http://localhost:4000/

6. 本地ok后上傳到github等待審核通過
hexo clean && hexo deploy  清理緩存上傳github

在這里插入圖片描述

三.配置指南

1._config.yml中設置網站信息

在這里插入圖片描述

2.配置分類、標簽

2.1.創建分類選項

  • hexo默認是按時間（年月日）分類，如果自定義分類：

    hexo new page categories

  • 生成文件在...\source\categories\index.md
    在這里插入圖片描述

  • 編輯創建分類生成的...\source\categories\index.md文件，加入 categories ：

    ---
title: 分類
date: 2024-05-10 14:37:47
type: "categories"
---

2.2. 創建標簽選項

  • 默認是沒有標簽的，生成標簽：

    hexo new page tags

  • 生成文件...\source\tags\index.md
    在這里插入圖片描述

  • 打開...\source\tags\index.md文件，加入 tags：

    ---
title: 標簽
date: 2024-05-10 14:37:47
type: "tags"
---

2.3.打開你要部署的md文件

部署到服務器的文章統一在放在source/_posts目錄下的
在這里插入圖片描述

打開文章，在頭部聲明分類和標簽

---
title: 安裝Nodejs、Git、Npm教程
date: 2024-05-10 14:52:57
categories: 
- web前端
- 環境安裝
tags:
- Nodejs
- Git
- Npm
---
  • 分類 只能有一個，如果有多個默認取第一個；標簽可以有多個

在這里插入圖片描述

編譯并上傳

hexo g && hexo d

等待審核查看網站是否生效

在這里插入圖片描述

要添加更多的歸檔或者自定義分類，參考：https://www.jianshu.com/p/ebbbc8edcc24

3.hexo報錯解決方案

hexo d命令報錯 ERROR Deployer not found: git
解決npm ERR! code CERT_HAS_EXPIRED npm ERR! errno CERT_HAS_EXPIRED npm ERR! request to
搭建Hexo博客中遇到的那些“坑”

Hexo 好看的主題推薦

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/web/10004.shtml
繁體地址，請注明出處：http://hk.pswp.cn/web/10004.shtml
英文地址，請注明出處：http://en.pswp.cn/web/10004.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

【MySQL】求和查詢，目標值int，但空數據時返回null的問題（Java）

【MySQL】求和查詢，目標值int，但空數據時返回null的問題（Java）

問題分析 int selectDeviceMonthRepairCount(String deviceType, String month);<select id"selectDeviceMonthRepairCount" resultType"int">SELECT SUM(repair_count)FROM warranty_recordsWHERE device_type #{deviceType}AND nian_yue #{month…
閱讀更多...
【代碼筆記】高并發場景下問題解決思路

【代碼筆記】高并發場景下問題解決思路

高并發指的是在單位時間內&#xff0c;瞬時流量激增&#xff0c;系統需要同時處理大量并行的請求或操作。這種情況通常出現在面向大量用戶或服務的分布式系統中&#xff0c;尤其是當用戶請求高度集中時&#xff0c;比如促銷活動、秒殺活動、注冊搶課、熱點事件、定時任務調度等…
閱讀更多...
Maven 插件使用

Maven 插件使用

1.spring-boot-maven-plugin 我們直接使用 maven package &#xff08;maven自帶的package打包功能&#xff09;&#xff0c;打包Jar包的時候&#xff0c;不會將該項目所依賴的Jar包一起打進去&#xff0c;在使用java -jar命令啟動項目時會報錯&#xff0c;項目無法正常啟動。…
閱讀更多...
開源相機管理庫Aravis例程學習（七）——chunk-parser

開源相機管理庫Aravis例程學習（七）——chunk-parser

開源相機管理庫Aravis例程學習&#xff08;七&#xff09;——chunk-parser 簡介例程代碼函數說明arv_camera_create_chunk_parserarv_camera_set_chunksarv_chunk_parser_get_integer_value 簡介 本文針對官方例程中的&#xff1a;05-chunk-parser做簡單的講解。并介紹其中調…
閱讀更多...
kali linux更新卡在libc6:amd64 (2.37-15)

kali linux更新卡在libc6:amd64 (2.37-15)

適配于linux的windows子系統&#xff0c;wsl2&#xff0c;安裝kali linux&#xff0c;運行 sudo apt update 卡在&#xff1a;Setting up libc6:amd64 (2.37-15) … 關機重啟、重新修復執行也不行 解決辦法&#xff1a;kill當前apt進程或者關機重啟kali-linux&#xff0c;然…
閱讀更多...
【系統架構師】-選擇題（十二）計算機網絡

【系統架構師】-選擇題（十二）計算機網絡

1、網閘的作用&#xff1a;實現內網與互聯網通信&#xff0c;但內網與互聯網不是直連的 2、管理距離是指一種路由協議的路由可信度。15表示該路由信息比較可靠 管理距離越小&#xff0c;它的優先級就越高&#xff0c;也就是可信度越高。 0是最可信賴的&#xff0c;而255則意味…
閱讀更多...
MySQL變量的定義與使用（一）

MySQL變量的定義與使用（一）

一、標識符的命名規范 1、不能以數字開頭 2、不能使用關鍵字 3、只能使用_和$符號&#xff0c;不允許使用其他符號 二、定義MySQL變量的方法 set userName"鵝卵石"; #讀取變量 select userName as 名稱; #讀取時包含賦值操作 select userName:喜羊羊 as 賦值查詢名…
閱讀更多...
【JavaScript】內置對象 - 數組對象 ① ( 數組簡介 | 數組創建 | 數組類型檢測 )

【JavaScript】內置對象 - 數組對象 ① ( 數組簡介 | 數組創建 | 數組類型檢測 )

文章目錄 一、數組對象1、數組簡介2、數組創建3、數組檢測 - Array.isArray() 方法4、數組檢測 - instanceof 運算符 Array 數組對象參考文檔 : https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array 一、數組對象 1、數組簡介 在 JavaScr…
閱讀更多...
（三十八）第 6 章 樹和二叉樹（二叉樹的二叉線索存儲）

（三十八）第 6 章 樹和二叉樹（二叉樹的二叉線索存儲）

1. 背景說明 2. 示例代碼 1) errorRecord.h // 記錄錯誤宏定義頭文件#ifndef ERROR_RECORD_H #define ERROR_RECORD_H#include <stdio.h> #include <string.h> #include <stdint.h>// 從文件路徑中提取文件名 #define FILE_NAME(X) strrchr(X, \\) ? strrc…
閱讀更多...
Html生成自定義函數的圖形（2024/5/10）

Html生成自定義函數的圖形（2024/5/10）

大概效果如下&#xff1a; 可以自定義函數和x的定義域。 我們可以使用數學表達式解析庫來解析用戶輸入的函數方程&#xff0c;并根據給定的 x 區間計算函數的值&#xff0c;然后使用圖表庫繪制圖形。 在這里&#xff0c;我將使用 math.js 庫來解析數學表達式&#xff0c;并使…
閱讀更多...
探索計算之美：HTML CSS 計算器案例

探索計算之美：HTML CSS 計算器案例

本次案例是通過HTML和CSS&#xff0c;我們可以為計算器賦予獨特的外觀和功能&#xff1b; 在這個計算器中&#xff0c;你將會發現&#xff1a; 簡潔清晰的界面設計&#xff0c;使用戶能夠輕松輸入和查看計算結果。利用HTML構建的結構&#xff0c;確保頁面具有良好的可訪問性和…
閱讀更多...
【全開源】JAVA上門家政服務系統源碼微信小程序+微信公眾號+APP+H5

【全開源】JAVA上門家政服務系統源碼微信小程序+微信公眾號+APP+H5

功能介紹 用戶端&#xff1a;精準分類、支持家政、維修、萬能服務、一口價、報價、線上、各類家政服務、優惠專區、師傅入駐、商家入駐、我的需求、補費明細、我的投訴 師傅端&#xff1a;接單池、消息通知、接單管理、今日訂單、師傅入駐、我的錢包、實名認證 商家端&#…
閱讀更多...
HTTPS 原理和 TLS 握手機制

HTTPS 原理和 TLS 握手機制

HTTPS的概述與重要性 在當今數字化時代&#xff0c;網絡安全問題日益凸顯&#xff0c;數據在傳輸過程中的安全性備受關注。HTTPS 作為一種重要的網絡通信協議&#xff0c;為數據的傳輸提供了強有力的安全保障。它是在 HTTP 的基礎上發展而來&#xff0c;通過引入數據加密機制&a…
閱讀更多...
流量分析（一)

流量分析（一)

數據庫類流量分析 MySQL流量 常規操作&#xff0c;查找flag ctfhub{} 注意要選擇字符集 Redis流量 查找ctfhub結果沒找到 嘗試把其變成十六進制繼續進行查找 看到了前半段flag 接著往下看 找到了后半段的flag MongoDB流量 還是一樣查找ctfhub 字符串沒找到 轉成十六進制也沒…
閱讀更多...
c 在線教育系統論文,在線教育需要在哪些渠道做付費推廣呢？

c 在線教育系統論文,在線教育需要在哪些渠道做付費推廣呢？

隨著在網上學習的人越來越多&#xff0c;很多在線教育公司都開發了屬于自己的平臺。如果只做開發&#xff0c;不去做運營推廣的話&#xff0c;這個在線平臺就等于是白做了。那么在線教育需要在哪些渠道做付費推廣呢? 1、官網廣告推薦位 Banner作為一款展示型頁面橫幅廣告&…
閱讀更多...
Spring狀態機的實現原理和業務場景

Spring狀態機的實現原理和業務場景

Spring Statemachine 是 Spring Framework 的一部分&#xff0c;它提供了一種實現狀態機的方式&#xff0c;允許開發者定義狀態機的狀態、事件、行為和轉換。狀態機是一種計算模型&#xff0c;它可以根據一系列規則從一個狀態轉移到另一個狀態。以下 V 哥將從Spring狀態機的基本…
閱讀更多...
OpenVoiceV2本地部署教程,蘋果MacOs部署流程,聲音響度統一,文字轉語音,TTS

OpenVoiceV2本地部署教程,蘋果MacOs部署流程,聲音響度統一,文字轉語音,TTS

最近OpenVoice項目更新了V2版本&#xff0c;新的模型對于中文推理更加友好&#xff0c;音色也得到了一定的提升&#xff0c;本次分享一下如何在蘋果的MacOs系統中本地部署OpenVoice的V2版本。 首先下載OpenVoiceV2的壓縮包&#xff1a; OpenVoiceV2-for-mac代碼和模型 https:…
閱讀更多...
Kitti數據集再識(官網閱讀)

Kitti數據集再識(官網閱讀)

KITTI數據集中真值與標定參數 0. 前言 為了再研KITTI數據集及方便下載文件，特地買了梯子，心疼人民幣QWQ～555 1. KITTI-home Welcome to the KITTI Vision Benchmark Suite! 我們利用我們的自動駕駛平臺開發新穎的具有挑戰性的真實世界計算機視覺基準。我們感興趣的任務是…
閱讀更多...
interview_bak

interview_bak

flink內存管理 JVM 存在的幾個問題： Java 對象存儲密度低。一個只包含 boolean 屬性的對象占用了16個字節內存：對象頭占了8個，boolean 屬性占了1個，對齊填充占了7個。而實際上只需要一個bit（1/8字節）就夠了。Full GC 會極大地影響性能，尤其是為了處理更大數據而開了很大…
閱讀更多...
安裝openssh-server，提供遠程ssh

安裝openssh-server，提供遠程ssh

安裝openssh-server&#xff0c;提供遠程ssh 1.檢查自己是否安裝了openssh-server dpkg -l | grep ssh如果輸出內容有openssh-server&#xff0c;說明已經安裝過了&#xff0c;可以跳過下一步 2.安裝openssh-server 由于ubuntu自帶ssh客戶端&#xff0c;只需要安裝openssh-se…
閱讀更多...
最新文章

Copyright @ 2022~2023