動態

詳情 返回 返回

使用 Github Pages 和 Hexo 搭建博客 - 動態 詳情

一、前言

其實可以通過github.io搭建wiki或者個人博客我挺久之前就知道,不過一直沒用,主要是因為已經有一個博客了,沒必要再搭一個,不過最近興起,就搭了個這個附屬博客,同步更新主博客的文章。

附屬博客地址:https://baby7.github.io/

截圖:

baby7.github.io首頁截圖

下面説一下優缺點,主要對比的是購買服務器搭建個人博客。

優點:

  • 不需要買服務器

使用Github Pages的服務器,只需要建一個github倉庫,然後往裏面放html文件就可以了,不需要去買服務器續費服務器。

  • 不需要買域名

可以直接使用Github Pages提供的二級域名,不僅省去了買域名的花費,還省去了域名申請這個冗長的流程。

  • 不需要擔心被攻擊

有Github撐腰,一點不帶怕的,不像我現在這個博客,三天兩頭被攻擊o(╥﹏╥)o

缺點:

  • 不利於SEO收錄

我嘗試在百度的站長平台驗證Github給的二級域名都提示不能被收錄,不過可以通過再購買一個域名做轉發,但這又是一筆花費,而且域名申請挺麻煩的。

新發現:google和必應可以收錄github.io的網站!

谷歌站長工具: https://search.google.com/search-console?hl=zh-CN

必應站長工具: https://www.bing.com/webmasters

  • 網絡不太通暢

眾所都周知,國內github的網絡情況一言難盡,經常訪問不了,這種情況在用它搭博客的情況下還不利於seo。當然如果自用的話有魔法就沒問題了。


二、搭建

先推薦下官方的搭建方法,我搭建完才看見這個,不過也懶得再換了。

在 GitHub Pages 上部署 Hexo


三、流程

一、 Github部分

1. 倉庫

首先在建立一個倉庫,倉庫名是username.github.io,其中username是你的github賬號名,這個也是你的最終的博客域名,如果你想改個別的域名,要不然改github的賬號名(不過理論上之前倉庫的地址都會變),要不然再申請一個賬號。另外記得倉庫的權限要設置成公開,不然無法訪問。

截圖:

GithubPages配置截圖

2. 初始化

複製倉庫地址,在本地使用你常用的開發軟件或者VsCode什麼的拉取代碼然後創建一個index.html。

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>學習HTML五年有餘,得此頁面</h1>
</body>
</html>

3. 測試

push到倉庫上以後等待Github Action完成,進入瀏覽器輸入username.github.io測試是否能看到第二步初始化中的\<h1\>標籤中的內容


二、Hexo部分

1. 初始化

首先進入倉庫,然後執行如下命令

$ hexo init <folder>
$ cd <folder>
$ npm install

folder隨便起,最好就起個hexo

2. 修改基礎配置

修改_config.yml,這裏放一下基礎設置(來源官網)

設置 描述
title 網站標題
subtitle 網站副標題
description 網站描述
keywords 網站的關鍵詞。 支持多個關鍵詞。
author 您的名字
language 網站使用的語言。 使用 2 個字母的 ISO-639-1 代碼,或 它的變體。 默認為 en
timezone 網站時區, Hexo 默認使用您電腦的時區。 請參考 時區列表, 中國可以用 Asia/Shanghai

3. 新增文章

執行命令

$ hexo new [layout] <title>

layout是佈局,這裏先填post就行,然後title是文章標題

在目錄<folder>/source/_posts中找到對應的md文件進行寫作

4. 編輯文章

這裏放個例子

---
title: 第一篇文章
date: 2024-01-01 00:00:00
---

> # 學習Markdown五年有餘,得此文章

5. 本地運行

修改後在命令行運行

hexo server -p 4000

在瀏覽器輸入localhost:4000查看是否可以訪問到

6. 生成

在命令行輸入

hexo generate

會在<folder>/public中生成所有的靜態文件,複製所有的,粘貼到倉庫那一層(就是上上層)

7. 測試

然後push除了<folder>的文件,等待Github Action完成後進入瀏覽器輸入username.github.io測試是否能正常查看


四、主題

好看的博客主題必不可少

官方的主題倉庫裏有不少,我推薦最後更新時間比較近的,時間遠的可能版本和Hexo不匹配。

主題倉庫:https://hexo.io/themes/

  • 使用:

一般是使用首先使用命令下載主題

$ git clone https://github.com/xxx/xxx-xxxx.git themes/xxxxx

然後在_config.yml文件中修改使用的主題

theme: xxxxx
  • 選型:

純看自己審美,我的主博客是暗色風還花裏胡哨的,這個新搭建的就選一個淺色的,也沒有多餘東西的風格,做一下推薦:NexT

user avatar u_16307147 頭像 zhidechaomian_detxs7 頭像 lpicker 頭像 bug1412 頭像 jwgqwyq 頭像 chenychenyu 頭像 familyaboveall 頭像 woxiaomaoshihuaihuai 頭像 user_cwhpnk0j 頭像 yuxuan_6598fe8637146 頭像 xixu 頭像 qfifteen 頭像
點贊 23 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.