国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

  1. Toy模板網(wǎng)首頁
  2. >Toy博客

Hexo + GitHub史上最全搭建個人blog教程

2年前作者：耶多分類：Toy博客閱讀(41)違法舉報

這篇具有很好參考價值的文章主要介紹了Hexo + GitHub史上最全搭建個人blog教程。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

由于希望搭建個人 blog ，現(xiàn)在市面上的博客很多，如 CSDN ，博客園，簡書等平臺，可以直接在上面發(fā)表，用戶交互做的好，寫的文章百度也能搜索的到。缺點是比較不自由，會受到平臺的各種限制和惡心的廣告。因而直接在 github page 平臺上托管我們的博客，特寫了這篇文章記錄下來。

教程共分四個部分：

  • 第一部分：hexo 的初級搭建還有部署到 github page上，以及個人域名的綁定。
  • 第二部分：hexo 的基本配置，更換主題，以及博客的簡單美化。
  • 第三部分：hexo 實現(xiàn)多終端工作。
  • 第四部分：記錄了一些在搭建過程中可能會遇到的問題及其解決方法。

搭建系統(tǒng)環(huán)境：

軟件環(huán)境：

項目 版本 系統(tǒng)環(huán)境
Centos 8 CentOS-8.2.2004-x86_64-dvd1.iso Minimal Install
ubuntu ubuntu-20.04.3-desktop-amd64.iso 默認安裝
NEXT 7.8.0

硬件環(huán)境：

項目 配置
內(nèi)存 8 GB
處理器 8
硬盤 200 GB
網(wǎng)絡(luò) 可連接互聯(lián)網(wǎng)

第一部分

hexo 的初級搭建還有部署到 github page 上，以及個人域名的綁定。

一、Hexo 簡介

Hexo 是一款基于 Node.js 的靜態(tài)博客框架，依賴少易于安裝使用，可以方便的生成靜態(tài)網(wǎng)頁托管在 GitHub 和 Coding 上，是搭建博客的首選框架。大家可以進入 hexo官網(wǎng) 進行詳細查看，因為 Hexo 的創(chuàng)建者是臺灣人，所以對中文的支持很友好，可以選擇中文進行查看。而且 hexo 作為一個快速簡潔的博客框架，用它來搭建博客真的非常容易。

二、Hexo 搭建步驟

  1. 安裝 Git
  2. 安裝 Node 12
  3. 安裝 hexo
  4. 初始化 hexo
  5. GitHub 創(chuàng)建個人倉庫
  6. 生成 SSH 添加到 GitHub
  7. 將 hexo 部署到 GitHub
  8. 設(shè)置個人域名

1. 安裝 Git

Git 是目前世界上最先進的分布式版本控制系統(tǒng)，可以有效、高速的處理從很小到非常大的項目版本管理。也就是用來管理你的 hexo 博客文章，上傳到 GitHub 的工具。Git 非常強大，建議每個人都去了解一下。

執(zhí)行以下命令進行安裝，安裝好后，用git --version 來查看一下版本：

  • centos 8.2

    dnf install git
git --version

  • ubuntu：注意容器無需 sudo 權(quán)限

    sudo apt-get install git
git --version

2. 安裝 Node 12

Hexo 是基于 node.js 編寫的，所以需要安裝 node.js 和里面的 npm 工具。

打開命令行，執(zhí)行以下命令，安裝完后，檢查一下是否安裝成功。

  • centos 8.2

    dnf install curl -y
curl -sL https://rpm.nodesource.com/setup_12.x | bash -
dnf install nodejs -y
npm install -g npm
node -v
npm -v

  • ubuntu

    sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs
sudo npm install -g npm
node -v
npm -v

3. 安裝 hexo

前面 git 和 nodejs 安裝好后，執(zhí)行以下命令就可以直接安裝 hexo 了。

打開命令行，執(zhí)行以下命令，安裝完成后，檢查是否安裝成功。

  • centos 8.2

    npm install -g hexo-cli
hexo -v

  • ubuntu

    sudo npm install -g hexo-cli
hexo -v

至此就全部安裝完了.

4. 初始化 hexo

接下來初始化 hexo，這個 filename 取什么名字都行，此文以 blog 為例。

hexo init blog

注意centos 8.2 需關(guān)閉防火墻：

  • centos 8.2

    systemctl stop firewalld
systemctl disable firewalld

進入blog目錄：

cd blog/
npm install

打開 hexo 的服務(wù)：

hexo g
hexo s

在瀏覽器輸入 localhost:4000 就可以看到你生成的博客了，如下所示：

hexo搭建github,Linux教程,github

terminal 使用 ctrl+c 可以把服務(wù)關(guān)掉。

blog 目錄內(nèi)容說明：

ls
_config.landscape.yml  _config.yml  db.json  node_modules  package.json  package-lock.json  public  scaffolds  source  themes
項目 說明
node_modules 依賴包
source 用來存放你的文章
themes 主題
_config.yml 博客的配置文件
public 存放生成的頁面
scaffolds 生成文章的一些模板

5. GitHub 創(chuàng)建個人倉庫

前置條件：有 GitHub 賬戶，沒有的話，需要先注冊 GitHub 賬號。

登錄 GitHub 后，在 GitHub.com 中找到 New repository，新建倉庫

hexo搭建github,Linux教程,github

創(chuàng)建 blog 倉庫，點擊 create repository。

hexo搭建github,Linux教程,github

6. 生成 SSH 添加到 GitHub

配置 git ，這里的 youremail 輸入你 GitHub 的郵箱。這樣 GitHub 才能知道你是不是對應(yīng)它的賬戶。

打開命令行，執(zhí)行以下命令：

git config --global user.name "yourname"
git config --global user.email "youremail"

執(zhí)行以下命令，可以用以下兩條，檢查 git 配置是否正確。

git config user.name
git config user.email

執(zhí)行以下命令，創(chuàng)建 SSH，一路回車。

ssh-keygen -t rsa -C "youremail"

而后在 GitHub 的 setting 中，找到 SSH keys 的設(shè)置選項，點擊New SSH key，執(zhí)行cat ~/.ssh/id_rsa.pub，并把id_rsa.pub里面的信息復(fù)制進去。

hexo搭建github,Linux教程,github

打開命令行，執(zhí)行以下命令，查看是否成功。

ssh -T git@github.com

7. 將 hexo 部署到 GitHub

  1. 這一步，將 hexo 和 GitHub 關(guān)聯(lián)起來，也就是將本地 blog 目錄內(nèi)容部署到 GitHub 上，打開 hexo 網(wǎng)站配置文件 blog/_config.yml，翻到最后，修改為以下內(nèi)容：

    # Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
  type: git
  repo: git@github.com:mdgqdjqr/blog.git
  branch: master

  2. 安裝用于發(fā)布文章的 git：

    cd blog/
npm install hexo-deployer-git --save

  3. 推送到 github：

    cd blog/
hexo clean && hexo g && hexo d

8. 設(shè)置個人域名

現(xiàn)在你的個人網(wǎng)站的地址是 yourname.github.io，如果覺得這個網(wǎng)址逼格不太夠，這就需要你設(shè)置個人域名了。但是需要花錢。

登陸 GitHub，進入 blog倉庫 點擊 Settings -> GitHub Pages

hexo搭建github,Linux教程,github

此時已經(jīng)有個一個相當于個人網(wǎng)站的東西，圖中綠色部分的地址點擊即可訪問

第二部分

hexo 的基本配置，更換主題，以及博客的簡單美化。

1. hexo 基本配置介紹

在文件根目錄下的_config.yml，就是整個 hexo 框架的配置文件了?？梢栽诶锩嫘薷拇蟛糠值呐渲?。詳細可參考 官方的配置 描述。

網(wǎng)站

參數(shù) 描述
title 網(wǎng)站標題
subtitle 網(wǎng)站副標題
description 網(wǎng)站描述
author 您的名字
language 網(wǎng)站使用的語言
timezone 網(wǎng)站時區(qū)。Hexo 默認使用您電腦的時區(qū)。時區(qū)列表。比如說：America/New_York, Japan, 和 UTC 。

其中，description主要用于 SEO，告訴搜索引擎一個關(guān)于您站點的簡單描述，通常建議在其中包含您網(wǎng)站的關(guān)鍵詞。author參數(shù)用于主題顯示文章的作者。

網(wǎng)址

參數(shù) 描述
url 網(wǎng)址，在這里，你需要把url改成你的網(wǎng)站域名?？筛臑閎log的GitHub Page網(wǎng)址
root 網(wǎng)站根目錄
permalink 文章的 永久鏈接 格式，也就是你生成某個文章時的那個鏈接格式。
permalink_defaults 永久鏈接中各部分的默認值

以下是官方給出的示例，關(guān)于鏈接的變量還有很多，需要的可以去官網(wǎng)上查找 永久鏈接 。

參數(shù) 結(jié)果
:year/:month/:day/:title/ 2013/07/14/hello-world
:year-:month-:day-:title.html 2013-07-14-hello-world.html
:category/:title foo/bar/hello-world

再往下翻，中間這些都默認就好了。

theme: landscape

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: <repository url>
  branch: [branch]

theme 就是選擇什么主題，也就是在 theme 這個文件夾下，在官網(wǎng)上有很多個主題，默認安裝的是 lanscape 這個主題。當你需要更換主題時，在官網(wǎng)上下載，把主題的文件放在 theme 文件夾下，修改這個參數(shù)為對應(yīng)的名字就可以了。

接下來這個 deploy 就是網(wǎng)站的部署的，repo 就是倉庫 (Repository) 的簡寫。branch 選擇倉庫的哪個分支。這個在之前進行 github page 部署的時候已經(jīng)修改過了，不再贅述。而這個在后面進行雙平臺部署的時候會再次用到。

Front-matter

Front-matter 是文件最上方以 — 分隔的區(qū)域，用于指定個別文件的變量，舉例來說：

title: Hello World
date: 2013/7/13 20:46:25
---

下是預(yù)先定義的參數(shù)，您可在模板中使用這些參數(shù)值并加以利用。

參數(shù) 描述
layout 布局
title 標題
date 建立日期
updated 更新日期
comments 開啟文章的評論功能
tags 標簽（不適用于分頁）
categories 分類（不適用于分頁）
permalink 覆蓋文章網(wǎng)址

其中，分類和標簽需要區(qū)別一下，分類具有順序性和層次性，也就是說 Foo, Bar 不等于 Bar, Foo；而標簽沒有順序和層次。

categories:
- Diary
  tags:
- PS3
- Games

layout（布局）

當你每一次使用代碼

hexo new paper

它其實默認使用的是 post 這個布局，也就是在 source 文件夾下的 _post 里面。

Hexo 有三種默認布局：post、page 和 draft，它們分別對應(yīng)不同的路徑，而您自定義的其他布局和 post 相同，都將儲存到 source/_posts 文件夾。

布局 路徑
post source/_posts
page source
draft source/_drafts

而 new 這個命令其實是：

hexo new [layout] <title>

只不過這個 layout 默認是 post 罷了。

page

如果你想另起一頁，那么可以使用

hexo new page board

系統(tǒng)會自動給你在 source 文件夾下創(chuàng)建一個 board 文件夾，以及 board 文件夾中的 index.md ，這樣你訪問的 board 對應(yīng)的鏈接就是 http://xxx.xxx/board

draft

draft 是草稿的意思，也就是你如果想寫文章，又不希望被看到，那么可以

hexo new draft newpage

這樣會在 source/_draft 中新建一個 newpage.md 文件，如果你的草稿文件寫的過程中，想要預(yù)覽一下，那么可以使用

hexo server --draft

在本地端口中開啟服務(wù)預(yù)覽。

如果你的草稿文件寫完了，想要發(fā)表到post中，

hexo publish draft newpage

就會自動把 newpage.md 發(fā)送到 post 中。

2. blog 更換主題

如果你覺得默認的landscape主題不好看，那么可以在官網(wǎng)的主題中，選擇你喜歡的一個主題進行修改就可以啦。點這里。

hexo搭建github,Linux教程,github

這里有200多個主題可以選。不過最受歡迎的就是那么幾個，比如 NexT主題，非常的簡潔好看。Next主題 是 Github 上 Star 最多的主題，其一直在更新維護，支持非常多的外部插件和功能選項，因此我目前使用的也是 Next。

hexo搭建github,Linux教程,github

直接在 github 鏈接上把源碼下載下來解壓，放到 blog/theme 文件夾下，并修改為自己想要的名字，本文以修改為 Next 為例。

然后修改 hexo 的基本配置文件 blog/_config.yml 把 theme 默認主題名字換成 Next ，它就會自動在 theme 文件夾中搜索你配置的主題，修改如下所示：

# theme: landscape
theme: Next

即可將 Hexo 博客主題替換為 Next 主題。

在 blog/themes/Next 目錄可以看到里面也有一個配置文件 _config.xml，這個配置文件是修改你 Next 主題的配置文件。

3. Next 主題美化

3.1 主題簡單配置

Next 主題提供很多方便的功能，我們來一一介紹：

3.1.1 Next主題風格

Next 提供了四中主題風格 scheme，可以在主題配置文件 blog/themes/Next/_config.yml 文件中進行選擇，分別是Muse、Mist、Pisces、Gemini：

# Schemes
scheme: Muse
#scheme: Mist
#scheme: Pisces
#scheme: Gemini

這里我選擇的是 Gemini 主題，也就是最后一種樣式，如下：

hexo搭建github,Linux教程,github

3.1.2 Next 主題一般設(shè)置

Next 主題 blog/themes/NEXT/_config.yml 的一般設(shè)置：

cache:
	enable:true	# 表示添加緩存功能，這樣瀏覽器后續(xù)打開我們的博客網(wǎng)站會更快
	
menu:	# 設(shè)置博客各個頁面的相對路徑，默認根路徑是blog/source
  home: / || home
  about: /about/ || user
  tags: /tags/ || tags
  categories: /categories/ || th
  archives: /archives/ || archive
  #schedule: /schedule/ || calendar	# 日歷
  #sitemap: /sitemap.xml || sitemap	# 站點地圖，供搜索引擎爬取
  #commonweal: /404/ || heartbeat	# 騰訊公益404

menu_settings:
  icons: true	# 是否顯示各個頁面的圖標
  badges: true	# 是否顯示分類/標簽/歸檔頁的內(nèi)容量

scheme: Gemini

以上是 Next 最常規(guī)的配置，而相應(yīng)的站點配置 blog/_config.yml 文件的基本配置為：

title: 莫得感情的機器人
subtitle: '記錄點點滴滴的知識'
description: '微笑'
keywords:
author: mdgqdjqr
language: zh-CN # 主題語言
timezone: Asia/Shanghai #中國的時區(qū)，不要亂改城市

url: https://mdgqdjqr.github.io/blog/ #綁定域名
permalink: :year/:month/:day/:title/
permalink_defaults:

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render: README.md # 部署的時候不包含的文件

# Writing
new_post_name: :title.md # 默認的新博文名稱
default_layout: post # 默認布局
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0 #把博客名稱改成小寫/大寫（1,2）
render_drafts: false # 是否顯示草稿
post_asset_folder: false #是否啟用資源文件夾（用來存放相對路徑圖片或文件）
relative_link: false # 把鏈接改為與根目錄的相對位址
future: true
highlight:
  enable: true #是否開啟代碼高亮
  line_number: true #是否增加代碼行號
  auto_detect: true #自動判斷代碼語言
  tab_replace:
  
index_generator: #首頁博客分布
  path: '' #博客的默認路徑
  per_page: 10 #每頁博客數(shù)量上限
  order_by: -date #博客排序

date_format: YYYY-MM-DD #博客日期格式
time_format: HH:mm:ss #博客時間格式

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10 #同上

#歸檔頁的分頁設(shè)置
archive_generator: #歸檔頁的配置
  per_page: 30 #歸檔頁每頁博客數(shù)
  yearly: true #按年歸檔
  monthly: true #按月歸檔
#標簽頁的分頁設(shè)置
tag_generator:
  per_page: 20 #標簽頁每頁博客數(shù)
  
theme: Next #選擇博客主題，名字為themes中選擇的主題文件夾名稱

deploy: #博客部署
  type: git
  repo: 
    github: git@github.com:mdgqdjqr/blog.git
  branch: master

3.2 添加博客自定義圖標

我們博客的默認圖標是N，不過 Next 支持修改圖標。

博客網(wǎng)站的圖標可以在 easyicon、bitbug、iconfont 等網(wǎng)站選擇和制作，然后選擇或者創(chuàng)建相應(yīng)大小的圖標文件，放置在blog/themes/Next/sources/images目錄下，并在主題配置文件中進行如下配置，只需要設(shè)置 small 和 medium 兩個就可以：

favicon:
  small: /images/16x16.png
  medium: /images/32x32.png
  apple_touch_icon: /images/128x128.png
  safari_pinned_tab: /images/logo2.svg

3.3 作者頭像設(shè)置

效果如下：

hexo搭建github,Linux教程,github

blog/themes/NEXT/_config.yml 可以設(shè)置當鼠標放置在頭像上時，頭像自動旋轉(zhuǎn)，具體設(shè)置如下：

avatar:
  # url: #/images/avatar.gif
  url: /images/header.jpg	# 將我們的頭像圖片放置在blog/themes/next/source/images目錄下，填寫具體地址
  rounded: true	# 鼠標放在頭像上時是否旋轉(zhuǎn)
  rotated: true	# 頭像是否設(shè)為圓形，否則為矩形

3.4 文章結(jié)束標志

效果如下：

hexo搭建github,Linux教程,github

在路徑 blog/themes/Next/layout/_macro 中新建 passage-end-tag.swig 文件，并添加以下內(nèi)容：

<div>
    {% if not is_index %}
        <div style="text-align:center;color: #ccc;font-size:14px;">-------------本文結(jié)束<i class="fa fa-paw"></i>感謝您的閱讀-------------</div>
    {% endif %}
</div>

接著打開blog/themes/Next/layout/_macro/post.njk文件，在post-body 之后(END POST BODY)， post-footer 之前添加如下代碼：

<div>
  {% if not is_index %}
    {% include 'passage-end-tag.swig' %}
  {% endif %}
</div>

然后打開主題配置文件（blog/themes/NEXT/_config.yml),在末尾添加：

# 文章末尾添加“本文結(jié)束”標記
passage_end_tag:
  enable: true

3.5 添加文章版權(quán)信息

效果如下：

hexo搭建github,Linux教程,github

要想開啟博客的版權(quán)功能，需要修改主題配置文件 blog/themes/NEXT/_config.yml，去除注釋：

creative_commons:
  license: by-nc-sa
  sidebar: true
  post: true

3.6 添加頁面寵物

效果如下：

hexo搭建github,Linux教程,github

首先在博客目錄下執(zhí)行：

cd blog/
npm install -save hexo-helper-live2d

然后在站點配置文件中加入：

live2d:
  enable: true
  scriptFrom: local
  pluginRootPath: live2dw/
  pluginJsPath: lib/
  pluginModelPath: assets/
  tagMode: false
  model:
    use: live2d-widget-model-tororo  #選擇哪種寵物模型
  display: #放置位置和大小
    position: right
    width: 150
    height: 300
  mobile:
    show: false #是否在手機端顯示

上面模型的選擇可在lived2d中選擇，并下載相應(yīng)的模型：

npm install live2d-widget-model-tororo

3.7 設(shè)置代碼樣式

效果如下：

hexo搭建github,Linux教程,github

代碼塊的行號顯示在上面已經(jīng)介紹了，位于站點配置文件，對于代碼塊的主題我們還能設(shè)置其背景，增加復(fù)制按鈕等，可修改主題配置文件 blog/themes/Next/_config.yml 如下：

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

3.8 添加搜索功能

效果如下：

hexo搭建github,Linux教程,github

安裝 hexo-generator-searchdb 插件

cd blog
npm install hexo-generator-searchdb --save

打開站點配置文件 blog/_config.yml，找到 Extensions 在下面添加:

# 搜索
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

同步修改主題配置文件 blog/themes/Next/_config.yml，搜索 local_search，修改 enable 為 true：

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
  enable: true

3.9 添加文章分類

效果如下：

hexo搭建github,Linux教程,github

  1. 打開命令行，執(zhí)行以下命令：

    cd blog/
hexo new page categories

  2. 成功后會提示：

    INFO  Created: ~/blog/source/categories/index.md

  3. 根據(jù)上面的路徑，找到 blog/source/categories/index.md 這個文件，打開后默認內(nèi)容是這樣的：

    ---
title: categories
date: 2022-01-20 23:11:18
---

  4. 修改后是這樣的：

    ---
title: 文章分類
date: 2022-01-20 23:11:18
type: "categories"
---

  5. 給文章添加 “categories” 屬性。

    打開需要添加分類的文章，為其添加 categories 屬性。下方的 categories: Linux 教程 表示添加這篇文章到 “Linux 教程” 這個分類。

    注意：hexo 一篇文章只能屬于一個分類，也就是說如果在 “- Linux 教程” 下方添加 “-xxx”，hexo 不會產(chǎn)生兩個分類，而是把分類嵌套（即該文章屬于 “- Linux 教程” 下的 “-xxx” 分類）。

    ---
title: nslookup
date: 2022-01-06 14:15:23
categories:
  - Linux 教程
---

至此，成功給文章添加分類，點擊首頁的"分類"可以看到該分類下的所有文章。當然，只有添加了 categories: xxx 的文章才會被收錄到首頁的"分類"中。

3.10 添加文章標簽

  1. 打開命令行，執(zhí)行以下命令：

    cd blog/
hexo new page tags

  2. 成功后會提示：

    INFO  Created: ~/blog/source/tags/index.md

  3. 根據(jù)上面的路徑，找到index.md這個文件，打開后默認內(nèi)容是這樣的：

    ---
title: tags
date: 2022-01-20 23:23:04
---

  4. 修改后是這樣的：

    ---
title: 文章分類
date: 2022-01-20 23:23:04
type: "tags"
---

  5. 給文章添加 “tags” 屬性。

    打開需要添加標簽的文章，為其添加tags屬性。tags: 下方的 - CentOS 8.2就是這篇文章的標簽了。

    ---
title: nslookup
date: 2022-01-06 14:15:23
categories:
  - Linux 教程
tags:
  - CentOS 8.2
---

至此，成功給文章添加分類，點擊首頁的“標簽”可以看到該標簽下的所有文章。當然，只有添加了tags: xxx的文章才會被收錄到首頁的“標簽”中。

3.11 啟用代碼塊復(fù)制功能

效果如下：

hexo搭建github,Linux教程,github

編輯 主題配置文件 blog/themes/Next/_config.yml，啟用 codeblock 模塊，如下：

codeblock:
  # Code Highlight theme
  # Available values: normal | night | night eighties | night blue | night bright | solarized | solarized dark | galactic
  # See: https://github.com/chriskempson/tomorrow-theme
  highlight_theme: night
  # Add copy button on codeblock
  copy_button:
    enable: true
    # Show text copy result.
    show_result: true
    # Available values: default | flat | mac
    style:

3.12 取消 “文章目錄” 對標題的自動編號

效果如下：

hexo搭建github,Linux教程,github

編輯 主題配置文件 blog/themes/NEXT/_config.yml，取消 “文章目錄” 對標題的自動編號。

toc:
  enable: true
  # Automatically add list number to toc.
  number: false
  # If true, all words will placed on next lines if header width longer then sidebar width.
  wrap: false
  # If true, all level of TOC in a post will be displayed, rather than the activated part of it.
  expand_all: false
  # Maximum heading depth of generated toc.
  max_depth: 6

3.13 設(shè)置blog首頁顯示文章摘要

效果如下：

hexo搭建github,Linux教程,github

修改方法：文章內(nèi)容中插入一行

<!--more-->

該行以上部分即為摘要顯示內(nèi)容，需點擊閱讀全文才能查看剩余的內(nèi)容。

3.14 hexo 使用數(shù)學(xué)公式

效果如下：

hexo搭建github,Linux教程,github

更換渲染引擎：

npm uninstall hexo-renderer-marked --save
npm install hexo-renderer-kramed --save

修改主題配置文件 blog/themes/NEXT/_config.yml 如下所示：

math:
  # Default (true) will load mathjax / katex script on demand.
  # That is it only render those page which has `mathjax: true` in Front-matter.
  # If you set it to false, it will load mathjax / katex srcipt EVERY PAGE.
  per_page: true

  # hexo-renderer-pandoc (or hexo-renderer-kramed) required for full MathJax support.
  mathjax:
    enable: true
    # See: https://mhchem.github.io/MathJax-mhchem/
    mhchem: true

  # hexo-renderer-markdown-it-plus (or hexo-renderer-markdown-it with markdown-it-katex plugin) required for full Katex support.
  katex:
    enable: false
    # See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
    copy_tex: false

需要使用數(shù)學(xué)公式時，打開即可：

---
title: markdown數(shù)學(xué)公式大全
date: 2022-01-07 14:15:23
categories:
  - 學(xué)術(shù)知識積累
mathjax: true
---

3.15 文章插入本地圖片

hexo 默認無法自動處理文章插入本地圖片，需要通過擴展插件支持。

  1. 開啟站點配置文件 blog/_config.yml

    post_asset_folder: true

  2. 安裝插件

    npm install https://github.com/CodeFalling/hexo-asset-image --save
注意不要用下面的命令，這個版本有bug
npm install hexo-asset-image --save

  3. 修改 hexo-asset-image 的 index.js 文件，即 node_modules/hexo-asset-image/index.js

    // $(this).attr('src', config.root + link + src);
// console.info&&console.info("update link as:-->"+config.root + link + src);
$(this).attr('src', '/' + link + src);
console.info&&console.info("update link as:-->"+'/' + link + src);

  4. 完成后即可在md文件中引用本地圖片，格式如下：
    hexo搭建github,Linux教程,github

第三部分

問題來了，如果你現(xiàn)在在自己的筆記本上寫的博客，部署在了網(wǎng)站上，那么你在家里用臺式機，或者實驗室的臺式機，發(fā)現(xiàn)你電腦里面沒有博客的文件，或者要換電腦了，最后不知道怎么移動文件，怎么辦？

在這里我們就可以利用git的分支系統(tǒng)進行多終端工作了，這樣每次打開不一樣的電腦，只需要進行簡單的配置和在github上把文件同步下來，就可以無縫操作了。

機制

機制是這樣的，由于hexo d上傳部署到github的其實是hexo編譯后的文件，是用來生成網(wǎng)頁的，不包含源文件。

hexo搭建github,Linux教程,github

也就是上傳的是在本地目錄里自動生成的.deploy_git里面。

其他文件 ，包括我們寫在source 里面的，和配置文件，主題文件，都沒有上傳到github，所以可以利用git的分支管理，將源文件上傳到github的另一個分支即可。

上傳分支

首先，先在github上新建一個hexo分支，如圖：

hexo搭建github,Linux教程,github

然后在這個倉庫的settings中，選擇默認分支為hexo分支（這樣每次同步的時候就不用指定分支，比較方便）。

hexo搭建github,Linux教程,github

然后在本地的任意目錄下，打開git bash，

將其克隆到本地，因為默認分支已經(jīng)設(shè)成了hexo，所以clone時只clone了hexo。

接下來在克隆到本地的ZJUFangzh.github.io中，把除了.git 文件夾外的所有文件都刪掉

把之前我們寫的博客源文件全部復(fù)制過來，除了 .deploy_git。這里應(yīng)該說一句，復(fù)制過來的源文件應(yīng)該有一個 .gitignore，用來忽略一些不需要的文件，如果沒有的話，自己新建一個，在里面寫上如下，表示這些類型文件不需要 git：

.DS_Store
Thumbs.db
db.json
*.log
node_modules/
public/
.deploy*/

注意，如果你之前克隆過theme中的主題文件，那么應(yīng)該把主題文件中的.git文件夾刪掉，因為git不能嵌套上傳，最好是顯示隱藏文件，檢查一下有沒有，否則上傳的時候會出錯，導(dǎo)致你的主題文件無法上傳，這樣你的配置在別的電腦上就用不了了。

而后

git add .
git commit -m "add branch"
git push

這樣就上傳完了，可以去你的github上看一看hexo分支有沒有上傳上去，其中node_modules、public、db.json已經(jīng)被忽略掉了，沒有關(guān)系，不需要上傳的，因為在別的電腦上需要重新輸入命令安裝 。

這樣就上傳完了。

更換電腦操作

一樣的，跟之前得環(huán)境搭建一樣。

  1. 安裝 git

    • centos 8.2

      dnf install git

    • ubuntu

      sudo apt-get install git

  2. 設(shè)置 git 全局郵箱和用戶名

    git config --global user.name "mdgqdjqr"
git config --global user.email "mdgqdjqr@163.com"

  3. 設(shè)置 ssh key

    ssh-keygen -t rsa -C "mdgqdjqr@163.com"

    將生成的密鑰填入 github，驗證是否成功。

    ssh -T git@github.com

  4. 安裝 nodejs

    • centos 8.2

      dnf install curl -y
curl -sL https://rpm.nodesource.com/setup_12.x | bash -
dnf install nodejs -y
npm install -g npm
node -v
npm -v

    • ubuntu

      sudo apt-get install curl
curl -sL https://deb.nodesource.com/setup_12.x | sudo -E bash -
sudo apt-get install nodejs
sudo npm install -g npm
node -v
npm -v

  5. 安裝 hexo

    sudo npm install hexo-cli -g

  6. 直接克隆 blog 即可，無需初始化

    git clone git@github.com:mdgqdjqr/blog.git

  7. 進入克隆的文件夾，安裝用于 blog 發(fā)布的 git

    cd blog/
npm install
npm install hexo-deployer-git --save

  8. 生成，部署

    hexo g && hexo d

  9. 然后就可以開始寫你的信的博客啦

    hexo new newpage

Tips：

  1. 不要忘記，每次寫完最好都把源文件上傳一下

    git add .
git commit -m "xxx"
git push

  2. 如果是在已經(jīng)編輯過的電腦上，已經(jīng)有clone文件夾了，那么，每次只要和遠端同步以下就行了。

    git pull

第四部分

在搭建 blog 過程中曾遇到如下問題，僅作為參考，希望能幫助到你。

1. TypeError: line.matchAll is not a function

執(zhí)行 hexo g 時出現(xiàn)錯誤，具體報錯如下：

[root@localhost blog]# hexo g
INFO  Validating config
INFO  Start processing
FATAL { err:
   TypeError: line.matchAll is not a function
       at res.value.res.value.split.map.line (/root/blog/node_modules/hexo-util/lib/highlight.js:128:26)
       at Array.map (<anonymous>)
       at closeTags (/root/blog/node_modules/hexo-util/lib/highlight.js:126:37)
       at highlight (/root/blog/node_modules/hexo-util/lib/highlight.js:119:10)
       at highlightUtil (/root/blog/node_modules/hexo-util/lib/highlight.js:23:16)
       at data.content.dataContent.replace (/root/blog/node_modules/lib/plugins/filter/before_post_render/backtick_code_block.js:92:17)
       at String.replace (<anonymous>)
       at Hexo.backtickCodeBlock (/root/blog/node_modules/lib/plugins/filter/before_post_render/backtick_code_block.js:19:30)
       at Hexo.tryCatcher (/root/blog/node_modules/bluebird/js/release/util.js:16:23)
       at Hexo.<anonymous> (/root/blog/node_modules/bluebird/js/release/method.js:15:34)
       at Promise.each.filter (/root/blog/node_modules/lib/extend/filter.js:67:52)
       at tryCatcher (/root/blog/node_modules/bluebird/js/release/util.js:16:23)
       at Object.gotValue (/root/blog/node_modules/bluebird/js/release/reduce.js:166:18)
       at Object.gotAccum (/root/blog/node_modules/bluebird/js/release/reduce.js:155:25)
       at Object.tryCatcher (/root/blog/node_modules/bluebird/js/release/util.js:16:23)
       at Promise._settlePromiseFromHandler (/root/blog/node_modules/bluebird/js/release/promise.js:547:31)
       at Promise._settlePromise (/root/blog/node_modules/bluebird/js/release/promise.js:604:18)
       at Promise._settlePromiseCtx (/root/blog/node_modules/bluebird/js/release/promise.js:641:10)
       at _drainQueueStep (/root/blog/node_modules/bluebird/js/release/async.js:97:12)
       at _drainQueue (/root/blog/node_modules/bluebird/js/release/async.js:86:9)
       at Async._drainQueues (/root/blog/node_modules/bluebird/js/release/async.js:102:5)
       at Immediate.Async.drainQueues [as _onImmediate] (/root/blog/node_modules/bluebird/js/release/async.js:15:14) } 'Something\'s wrong. Maybe you can find the solution here: %s' '\u001b[4mhttps://hexo.io/docs/troubleshooting.html\u001b[24m'

經(jīng)排查，發(fā)現(xiàn)問題出現(xiàn)在Node.js的版本上。由于Node.js 10在2021年8月30日已停止服務(wù)，新版本的Hexo需要Node.js版本在12.0+。

解決方法：升級nodejs到12.0+

2. Error: Cannot find module ‘jquery’

執(zhí)行 hexo s 時出現(xiàn)錯誤，具體報錯如下：

[root@localhost blog]# hexo s
INFO  Validating config
ERROR {
  err: Error: Cannot find module 'jquery'
  Require stack:
  - /root/blog/themes/Ying/scripts/tags/tabbed_codeblock.js
      at Function.Module._resolveFilename (internal/modules/cjs/loader.js:815:15)
      at Function.Module._load (internal/modules/cjs/loader.js:667:27)
      at Module.require (internal/modules/cjs/loader.js:887:19)
      at req (/root/blog/node_modules/lib/index.js:285:23)
      at /root/blog/themes/Ying/scripts/tags/tabbed_codeblock.js:11:9
      at /root/blog/node_modules/lib/index.js:298:14
      at tryCatcher (/root/blog/node_modules/bluebird/js/release/util.js:16:23)
      at Promise._settlePromiseFromHandler (/root/blog/node_modules/bluebird/js/release/promise.js:547:31)
      at Promise._settlePromise (/root/blog/node_modules/bluebird/js/release/promise.js:604:18)
      at Promise._settlePromise0 (/root/blog/node_modules/bluebird/js/release/promise.js:649:10)
      at Promise._settlePromises (/root/blog/node_modules/bluebird/js/release/promise.js:729:18)
      at _drainQueueStep (/root/blog/node_modules/bluebird/js/release/async.js:93:12)
      at _drainQueue (/root/blog/node_modules/bluebird/js/release/async.js:86:9)
      at Async._drainQueues (/root/blog/node_modules/bluebird/js/release/async.js:102:5)
      at Immediate.Async.drainQueues [as _onImmediate] (/root/blog/node_modules/bluebird/js/release/async.js:15:14)
      at processImmediate (internal/timers.js:461:21) {
    code: 'MODULE_NOT_FOUND',
    requireStack: [ '/root/blog/themes/Ying/scripts/tags/tabbed_codeblock.js' ]
  }
} Script load failed: %s themes/Ying/scripts/tags/tabbed_codeblock.js

經(jīng)排查，發(fā)現(xiàn)未安裝 jquery，打開命令行，執(zhí)行以下命令即可：

npm install jquery --save

3. FATAL YAMLException: can not read an implicit mapping pair; a colon is missed

執(zhí)行 hexo s -g 時出現(xiàn)錯誤，具體報錯如下：

FATAL YAMLException: can not read an implicit mapping pair; a colon is missed

報錯信息是提示hexo的yml配置文件 冒號后面少了空格
解決方案：到提示行將對應(yīng)的空格補上即可

4. FATAL TypeError: Object.fromEntries is not a function

執(zhí)行 hexo 相關(guān)操作出現(xiàn)錯誤，具體報錯如下：

INFO  Validating config
FATAL TypeError: Object.fromEntries is not a function

查看 node 版本，發(fā)現(xiàn)是 v10.19.0，升級到 v12.22.10 即可

5. 中文路徑文章目錄不能自動跳轉(zhuǎn)

修改方法見：fix: Chinese TOC cannot jump #1540

總結(jié)

到這里就基本做完了。其實都是參考別的博主的設(shè)置的，不一定僅限于 NEXT 主題，其他主題的設(shè)置也是大體相同的，所以如果你希望設(shè)置別的主題，那么仔細看一下這個主題的代碼結(jié)構(gòu)，也能夠把上邊的功能添加進去。

多看看別的博主的那些功能，如果有你能找到自己喜歡的功能，那么好好發(fā)動搜索技能，很快就能找到怎么做了。加油吧！文章來源地址http://www.zghlxwxcb.cn/news/detail-784122.html

到了這里，關(guān)于Hexo + GitHub史上最全搭建個人blog教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

本文來自互聯(lián)網(wǎng)用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務(wù)，不擁有所有權(quán)，不承擔相關(guān)法律責任。如若轉(zhuǎn)載，請注明出處： 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實不符，請點擊違法舉報進行投訴反饋，一經(jīng)查實，立即刪除！

領(lǐng)支付寶紅包贊助服務(wù)器費用

相關(guān)文章

  • 【2023最新版】Hexo+github搭建個人博客并綁定個人域名

    【2023最新版】Hexo+github搭建個人博客并綁定個人域名

    本篇教程完整講述了如何利用Hexo+github搭建個人博客并且綁定自己的域名，成為自己的網(wǎng)站！ 我的博客網(wǎng)站：武師叔 - 做一個有趣而不甘平庸的人！---------------------------------(備用wushishu.github.io) 教程參考了很多互聯(lián)上的內(nèi)容，在美化教程上面可以根據(jù)自己的審美，不必全部照

    2023年04月08日
    瀏覽(30)

  • Hexo+GitHub搭建個人網(wǎng)站簡要流程及遇到的問題

    剛剛搭建好的，有興趣的朋友可以看一下 B_White的博客 git的安裝和配置沒什么特別的。 在GitHub中新建一個倉庫，命名方式是： “username.github.io” ，其中username是你的GitHub用戶名，這個倉庫的名字就是以后你的博客地址。 按照官方的參考文檔安裝即可，沒有出現(xiàn)錯誤。 Hexo安

    2024年02月01日
    瀏覽(19)
  • Hexo+Github博客搭建教程

    Hexo+Github博客搭建教程

    注意，這篇文章篇幅較長，主要針對新手，每一步很詳細，所以可能會顯得比較啰嗦，所以建議基礎(chǔ)比較好小伙伴根據(jù)目錄選擇自己感興趣的部分跳著看，不要文章沒看，上來先噴一下！謝謝*[Math Processing Error]⊙o⊙*。 教程內(nèi)容隨意復(fù)制使用，引用的話請加一個參考鏈接，謝

    2024年01月16日
    瀏覽(17)
  • 博客搭建教程Github+Hexo+hexo-theme-matery主題

    博客搭建教程Github+Hexo+hexo-theme-matery主題

    前情提要 寫這篇文的目的 記錄自己搭建過程，便于以后快速復(fù)用 總結(jié)經(jīng)驗和自己踩的坑，給其他小伙伴一些參考(由于是搭建后寫的，所以沒有參考圖片) 介紹 初步效果參考我的博客：hermia的個人博客 本博客基于Hexo框架，使用github托管 使用自定義域名： hermiablog.com hexo主題

    2024年02月19日
    瀏覽(30)
  • Hexo+Github+Netlify博客搭建教程

    Hexo+Github+Netlify博客搭建教程

    ?作者簡介：大家好，我是Leo，熱愛Java后端開發(fā)者，一個想要與大家共同進步的男人???? ??個人主頁：Leo的博客 ??當前專欄： 博客系列 ?特色專欄： MySQL學(xué)習(xí) ??本文內(nèi)容：Hexo+Github+Netlify博客搭建教程 ??個人知識庫： [Leo知識庫]https://gaoziman.gitee.io/blogs/)，歡迎大家訪

    2024年02月08日
    瀏覽(54)
  • 手把手教你使用Hexo+GitHub搭建個人博客并發(fā)布文章（附常見問題解決方法）

    手把手教你使用Hexo+GitHub搭建個人博客并發(fā)布文章（附常見問題解決方法）

    本教程使用GitHub自帶的GitHub pages來生成靜態(tài)個人博客，而Hexo可以更換各種好看的主題，而且都是免費的，花一點時間就可以打造出自己獨有的個人博客。 Hexo這個有力的工具可以讓我們專注于寫出一篇博客而不需要關(guān)心如何編寫html和CSS，再如何形成一個網(wǎng)站，它可以根據(jù)ma

    2024年02月04日
    瀏覽(26)
  • 超詳細Hexo+Github Page搭建技術(shù)博客教程

    超詳細Hexo+Github Page搭建技術(shù)博客教程

    博客有第三方平臺，也可以自建，比較早的有博客園、CSDN，近幾年新興的也比較多諸如：WordPress、segmentFault、簡書、掘金、知乎專欄、Github Page 等等。 這次我要說的就是 Github Page + Hexo 搭建個人博客的方式！Github Page 是 Github 提供的一種免費的靜態(tài)網(wǎng)頁托管服務(wù)（所以想想免

    2023年04月27日
    瀏覽(20)
  • hexo + github 創(chuàng)建個人博客網(wǎng)站

    hexo + github 創(chuàng)建個人博客網(wǎng)站

    nodejs 和 npm git hexo 是一個靜態(tài)博客生成網(wǎng)站，可以快速制作自己的博客網(wǎng)站并部署 安裝hexo npm install hexo-cli -g 創(chuàng)建項目 hexo init 本地預(yù)覽 hexo s 新建倉庫 創(chuàng)建一個名為[用戶名].github.io的倉庫 下載自動部署插件 npm install hexo-deployer-git --save 修改hexo的配置文件 _config.yml 在deplay中添

    2024年02月05日
    瀏覽(32)
  • Hexo+GithubPages免費搭建個人博客網(wǎng)站

    Hexo+GithubPages免費搭建個人博客網(wǎng)站

    一、前言 二、Github配置 新建同名倉庫 配置Pages 三、安裝Hexo 四、配置hexo-deployer-git 五、訪問 六、發(fā)布文章 七、安裝主題 我之前開了好幾年的云服務(wù)器了，實際上使用場景并不是很多，感覺有點浪費。前兩個月都給關(guān)掉了，現(xiàn)在呢琢磨著弄一個免費的云服務(wù)搭建個人博客。

    2024年02月13日
    瀏覽(38)
  • 構(gòu)建個人博客_Obsidian_github.io_hexo

    構(gòu)建個人博客_Obsidian_github.io_hexo

    很早就開始分享文檔，以技術(shù)類的為主，一開始是 MSN，博客，隨著平臺的更替，后來又用了 CSDN，知乎，簡書…… 再后來是 Obsidian，飛書，Notion，常常有以下困擾： 1.1 問題 各平臺格式不同，審核規(guī)則不同，需要花很多時間上傳多個平臺，文檔更新成本也高。 分類太簡單，

    2024年02月11日
    瀏覽(23)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包