主頁 >  其他 > hexo+github搭建個人博客教程和各種坑記錄

hexo+github搭建個人博客教程和各種坑記錄

2020-09-11 09:08:47 其他

記錄使用github pages服務搭建個人博客的詳細程序以及遇到的各種坑

hexo+github搭建個人博客教程

1.前言

1.1 準備作業

環境 ： win10

  • 注冊github賬號：https://github.com/

  • 下載安裝node.js:官網下載https://nodejs.org/en/

    下載后圖形化界面安裝，安裝成功后運行cmd 輸入node -v，顯示版本資訊即為成功

    下載npm：由于新版的nodejs已經集成了npm，所以之前npm也一并安裝好了，同樣可以通過輸入 "npm -v" 來測驗是否成功安裝

  • 下載git,配置好用戶名密碼郵箱

    2.搭建博客

    2.1github創建倉庫

    在github網頁新建一個倉庫并命名為你的用戶名.github.io的倉庫，注意：

    • 驗證注冊的郵箱

    • 倉庫名必須為用戶名.github.io

    • 倉庫創建后需要等待一會

      2.2 配置ssh-key

      首先打開git bush ,執行

      $ cd ~/. ssh #檢查本機已存在的ssh密鑰

      如果提示：No such file or directory 說明你是第一次使用git ：

      ssh-keygen -t rsa -C "郵件地址"

      然后連續3次回車，最侄訓生成一個檔案在用戶目錄下，打開用戶目錄，找到.ssh\id_rsa.pub檔案，記事本打開并復制里面的內容，打開你的github主頁，進入setting -> SSH and GPG keys -> New SSH key：

    打開命令列或者git bash，輸入

    $ ssh -T [email protected] # 注意郵箱地址不用改

    如果提示Are you sure you want to continue connecting (yes/no)?，輸入yes，然后會看到： Hi xxx ...!

如圖，即為配置成功，然后輸入

$ git config --global user.name "liuxianan"// 你的github用戶名，非昵稱
$ git config --global user.email  "[email protected]"// 填寫你的github注冊郵箱

3.配置hexo

3.1 hexo

Hexo是一個簡單、快速、強大的基于 Github Pages 的博客發布工具，支持Markdown格式，有眾多優秀插件和主題，

官網： http://hexo.io
github: https://github.com/hexojs/hexo

  • 推薦完全在git bash 執行命令

  • hexo不同版本差別較大，注意區分

  • hexo有兩種_config.yml檔案 ，一個是根目錄下的全域的_config.yml，一個是各個theme下的

    3.2hexo安裝

    $ npm install -g hexo

    新建hexo檔案夾，這個檔案夾將作為你存放代碼的地方

    切到hexo檔案夾打開命令列，運行

    $ hexo init

hexo會自動下載一些檔案到這個目錄，包括node_modules：

$ hexo g # 生成
$ hexo s # 啟動服務

執行以上命令之后，hexo就會在public檔案夾生成相關html檔案，這些檔案將來都是要提交到github去

hexo s是開啟本地預覽服務，打開瀏覽器訪問 http://localhost:4000 即可看到內容

如果埠占用，運行以下：

  1. 按下Win+R調出命令列視窗，輸入netstat -aon|findstr "4000"，找到指定行最后一列的數字（PID）
  2. 輸入tasklist|findstr "PID"，發現是xxx用了4000埠，
  3. 再次輸入taskkill /f /t /im xxx.exe結束該行程，

第一次初始化的時候hexo已經幫我們寫了一篇名為 Hello World 的文章，默認的主題比較丑

3.3修改主題

以主題 https://github.com/esappear/hexo-theme-clover 為例：

可在 https://hexo.io/themes/ 查找更多主題

推薦主題 http://theme-next.iissnan.com/getting-started.html

在博客根目錄:

$ git clone https://github.com/blleng/hexo-theme-lx themes/lx

更改站點設定檔案_config.yml:

theme: lx

然后重新執行hexo g來重新生成， 如果出現一些莫名其妙的問題例如樣式崩了，可以先執行hexo clean來清理一下public的內容，然后再來重新生成和發布

3.4 上傳到github

在上傳代碼到github之前，一定要記得先把你以前所有代碼下載下來（雖然github有版本管理，但備份一下總是好的），因為從hexo提交代碼時會把你以前的所有代碼都刪掉，

配置好ssh-key后，配置hexo檔案夾中的_config.yml:

deploy :
  type: git
  repository: [email protected]:lishoushoua/lishoushoua.git
  branch: master

  • 注意！deploy后要有一個空格，否則hexo d會報錯

    此時直接執行hexo d的話一般會報如下錯誤：

Deployer not found: github 或者 Deployer not found: git

安裝一個插件：

npm install hexo-deployer-git --save
  • 注意！要在git bash 中運行命令， 否則會提示Permission denied (publickey)

打開你的git bash，輸入hexo d就會將本次有改動的代碼全部提交，沒有改動的不會：

重繪github page頁面,即可顯示

3.5常用hexo命令

hexo new "postName" #新建文章
hexo new page "pageName" #新建頁面
hexo generate #生成靜態頁面至public目錄
hexo server #開啟預覽訪問埠（默認埠4000，'ctrl + c'關閉server）
hexo deploy #部署到GitHub
hexo help  # 查看幫助
hexo version  #查看Hexo的版本


hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy


hexo s -g #生成并本地預覽
hexo d -g #生成并上傳

3.6_config.yml

在Hexo中有兩個很重要的名為_config.yml的檔案，其中一個在站點安裝的根目錄下，另一個在主題目錄下，前者提供了Hexo自身的一些基本配置資訊，后者為你所安裝的主題的相關配置，為了方便區分，我們把前者稱為站點組態檔，后者稱為主題組態檔，

站點組態檔

檔案路徑站點根目錄/_config.yml
這里貼一下個人的部分配置，可以改一下相關內容自行體會一下效果：

# Site
title: cuteerha
subtitle: Live well,love lots,and laugh often
description: 個人學習記錄
keywords:
author: cuteerha
language: en
timezone: Changchun

“title”：博客的名稱，
“subtitle”：根據主題的不同，有的會顯示有的不會顯示，
“description”：主要用于SEO，告訴搜索引擎一個關于站點的簡單描述，通常建議在其中包含網站的關鍵詞，
“author”：作者名稱，用于主題顯示文章的作者，
“language”：語言會對應的決議正在應用的主題中的languages檔案夾下的不同語言檔案，所以這里的名稱要和languages檔案夾下的語言檔案名稱一致，
“timezone”：可不填寫，

# URL
## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'

url: https://lishoushoua.github.io/lishoushoua.github.io/
root: /lishoushoua.github.io/
permalink: :title/
permalink_defaults:
pretty_urls:
  trailing_index: true # Set to false to remove trailing index.html from permalinks

“url”：一般填寫自己的站點鏈接，
“root”：設定根目錄的位置，如果你的網站存放在子目錄中，例如 http://yoursite.com/blog，則應該將你的 url 設為http://yoursite.com/blog 并把 root 設為 /blog/，
“permalink”：生成的鏈接的格式，帶井號的是默認的格式，帶有日期感覺怪怪的，改成了自己喜歡的格式，規則也比較簡單，標簽前面要加英文冒號，
“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:


# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link: true # Open external links in new tab
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
  enable: true
  line_number: true
  auto_detect: false
  tab_replace:

書寫相關的設定
“new_post_name”：新的博文的檔案名
“default_layout:“ 默認布局
“filename_case: 0“ #把檔案名稱轉換為 (1) 小寫或 (2) 大寫
“render_drafts: false“ 是否顯示草稿
“post_asset_folder: false“ #是否啟動資源檔案夾
“relative_link: false“ #把鏈接改為與根目錄的相對位址
“future: true “
“highlight:“ #代碼塊的設定，Hexo自帶的代碼高亮插件

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

分類和標簽的設定
“default_category”：如果撰寫文章時沒有設定分類，默認的分類選擇，
“category_map”：用于映射分類的別名，
“tag_map”：用法和分類別名是一樣的，

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy :
  type: git
  repository: [email protected]:lishoushoua/lishoushoua.git
  branch: master

“theme”：主題拓展，可以在主題商店選擇其他主題，這里使用next
“deploy”：部署方式

4.遇到的問題

4.1關于hexo安裝失敗的解決方法

可能國內npm源有問題，鍵入一下代碼即可成功安裝

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

4.2出現*'git'* 不是內部或外部命令，也不是可運行的程式

Windows下配置Git,配置環境變數path

  • 找到git安裝路徑中bin的位置，如：D:\Program Files\Git\bin
  • 找到git安裝路徑中git-core的位置，如：D:\Program Files\Git\libexec\git-core;
  • 右鍵“計算機”->“屬性”->“高級系統設定”->“環境變數”->在下方的“系統變數”中找到“path”->選中“path”并選擇“編輯”->將找到的bin和git-core路徑復制到其中->保存并退出
  • 注：“path”中，每個路徑之間要以英文輸入狀態下的分號——“;”作為間隔

4.3 npm ERR! Error: EPERM: operation not permitted

權限問題，使用管理員權限打開命令列，也可以對hexo所在檔案夾修改相應的用戶權限

4.4 git push沒有權限

Permission denied (publickey).fatal: Could not read from remote repository.

  1. 先看本地是否有ssh檔案

    > cd ~/.ssh

  2. 有則把公鑰加到github,參見前文配置密鑰

  3. 執行 ssh -T [email protected] 出現如下提示，本地公鑰沒有問題

    > ssh -T [email protected]
Hi lishoushoua! You've successfully authenticated, but GitHub does not provide shell access.

4.5nothing to commit, working tree clean

hexo進行提交博客，使用hexo d命令，但需要是使用 hexo-deployer-git 包的，如果沒有安裝，它檢索不到博文，進而提交時，讓github發現專案沒有發生變化，于是提交失敗，彈出這種提示，

安裝 hexo-deployer-git

 npm install hexo-deployer-git

4.6 github page沒有樣式

url地址沒有配置正確，修改_config.yml檔案的url地址和根目錄

url: https://lishoushoua.github.io/lishoushoua.github.io/
root: /lishoushoua.github.io/

有可能是hexo快取的問題，也就是網站根目錄的db.json出了問題，建議清除下快取 清除快取的方法： 執行命令：hexo clean 然后生成靜態博客，在本地預覽:

$hexo clean
$hexo g
$hexo d

4.7 github更換next主題后404

排除主題和 CNAME 問題，出現 404 ，首先判斷是缺少 index.html ，所以肯定就是靜態頁面檔案不全，可以查看.deploy_git 目錄下是否有 index.html，運行以下命令解決：

 npm install hexo-generator-index --save

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/5121.html

標籤：其他

上一篇：技術人員該如何站好最后一班崗？

下一篇：OpenLayers 根據坐標動態畫多邊形

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 網閘典型架構簡述

    網閘架構一般分為兩種：三主機的三系統架構網閘和雙主機的2+1架構網閘。 三主機架構分別為內端機、外端機和仲裁機。三機無論從軟體和硬體上均各自獨立。首先從硬體上來看，三機都用各自獨立的主板、記憶體及存盤設備。從軟體上來看，三機有各自獨立的作業系統。這樣能達到完全的三機獨立。對于“2+1”系統，“2”分為 ......

    uj5u.com 2020-09-10 02:00:44 more
  • 如何從xshell上傳檔案到centos linux虛擬機里

    如何從xshell上傳檔案到centos linux虛擬機里及：虛擬機CentOs下執行 yum -y install lrzsz命令，出現錯誤：鏡像無法找到軟體包 前言 一、安裝lrzsz步驟 二、上傳檔案 三、遇到的問題及解決方案 總結 前言 提示：其實很簡單，往虛擬機上安裝一個上傳檔案的工具 ......

    uj5u.com 2020-09-10 02:00:47 more
  • 一、SQLMAP入門

    一、SQLMAP入門 1、判斷是否存在注入 sqlmap.py -u 網址/id=1 id=1不可缺少。當注入點后面的引數大于兩個時。需要加雙引號， sqlmap.py -u "網址/id=1&uid=1" 2、判斷文本中的請求是否存在注入 從文本中加載http請求，SQLMAP可以從一個文本檔案中 ......

    uj5u.com 2020-09-10 02:00:50 more
  • Metasploit 簡單使用教程

    metasploit 簡單使用教程 浩先生， 2020-08-28 16:18:25 分類專欄： kail 網路安全 linux 文章標簽： linux資訊安全 編輯 著作權 metasploit 使用教程 前言 一、Metasploit是什么？ 二、準備作業 三、具體步驟 前言 Msfconsole ......

    uj5u.com 2020-09-10 02:00:53 more
  • 游戲逆向之驅動層與用戶層通訊

    驅動層代碼： #pragma once #include <ntifs.h> #define add_code CTL_CODE(FILE_DEVICE_UNKNOWN,0x800,METHOD_BUFFERED,FILE_ANY_ACCESS) /* 更多游戲逆向視頻www.yxfzedu.com ......

    uj5u.com 2020-09-10 02:00:56 more
  • 北斗電力時鐘（北斗授時服務器）讓網路資料更精準

    北斗電力時鐘（北斗授時服務器）讓網路資料更精準 北斗電力時鐘（北斗授時服務器）讓網路資料更精準 京準電子科技官微——ahjzsz 近幾年，資訊技術的得了快速發展，互聯網在逐漸普及，其在人們生活和生產中都得到了廣泛應用，并且取得了不錯的應用效果。計算機網路資訊在電力系統中的應用，一方面使電力系統的運行 ......

    uj5u.com 2020-09-10 02:01:03 more
  • 【CTF】CTFHub 技能樹 彩蛋 writeup

    ?碎碎念 CTFHub：https://www.ctfhub.com/ 筆者入門CTF時時剛開始刷的是bugku的舊平臺，后來才有了CTFHub。 感覺不論是網頁UI設計，還是題目質量，賽事跟蹤，工具軟體都做得很不錯。 而且因為獨到的金幣制度的確讓人有一種想去刷題賺金幣的感覺。 個人還是非常喜歡這個 ......

    uj5u.com 2020-09-10 02:04:05 more
  • 02windows基礎操作

    我學到了一下幾點 Windows系統目錄結構與滲透的作用 常見Windows的服務詳解 Windows埠詳解 常用的Windows注冊表詳解 hacker DOS命令詳解（net user / type /md /rd/ dir /cd /net use copy、批處理 等） 利用dos命令制作 ......

    uj5u.com 2020-09-10 02:04:18 more
  • 03.Linux基礎操作

    我學到了以下幾點 01Linux系統介紹02系統安裝，密碼啊破解03Linux常用命令04LAMP 01LINUX windows： win03 8 12 16 19 配置不繁瑣 Linux：redhat,centos(紅帽社區版)，Ubuntu server,suse unix:金融機構，證券，銀 ......

    uj5u.com 2020-09-10 02:04:30 more
  • 05HTML

    01HTML介紹 02頭部標簽講解03基礎標簽講解04表單標簽講解 HTML前段語言 js1.了解代碼2.根據代碼 懂得挖掘漏洞 （POST注入/XSS漏洞上傳）3.黑帽seo 白帽seo 客戶網站被黑帽植入劫持代碼如何處理4.熟悉html表單 <html><head><title>TDK標題，描述 ......

    uj5u.com 2020-09-10 02:04:36 more
最新发布
  • 2023年最新微信小程式抓包教程

    01 開門見山 隔一個月發一篇文章，不過分。 首先回顧一下《微信系結手機號資料庫被脫庫事件》，我也是第一時間得知了這個訊息，然后跟蹤了整件事情的經過。下面是這起事件的相關截圖以及近日流出的一萬條資料樣本： 個人認為這件事也沒什么，還不如關注一下之前45億快遞資料查詢渠道疑似在近日復活的訊息。 訊息是 ......

    uj5u.com 2023-04-20 08:48:24 more
  • web3 產品介紹：metamask 錢包 使用最多的瀏覽器插件錢包

    Metamask錢包是一種基于區塊鏈技術的數字貨幣錢包，它允許用戶在安全、便捷的環境下管理自己的加密資產。Metamask錢包是以太坊生態系統中最流行的錢包之一，它具有易于使用、安全性高和功能強大等優點。 本文將詳細介紹Metamask錢包的功能和使用方法。 一、 Metamask錢包的功能 數字資 ......

    uj5u.com 2023-04-20 08:47:46 more
  • vulnhub_Earth

    前言 靶機地址->>>vulnhub_Earth 攻擊機ip：192.168.20.121 靶機ip：192.168.20.122 參考文章 https://www.cnblogs.com/Jing-X/archive/2022/04/03/16097695.html https://www.cnb ......

    uj5u.com 2023-04-20 07:46:20 more
  • 從4k到42k，軟體測驗工程師的漲薪史，給我看哭了

    清明節一過，盲猜大家已經無心上班，在數著日子準備過五一，但一想到銀行卡里的余額……瞬間心情就不美麗了。最近，2023年高校畢業生就業調查顯示，本科畢業月平均起薪為5825元。調查一出，便有很多同學表示自己又被平均了。看著這一資料，不免讓人想到前不久中國青年報的一項調查：近六成大學生認為畢業10年內會 ......

    uj5u.com 2023-04-20 07:44:00 more
  • 最新版本 Stable Diffusion 開源 AI 繪畫工具之中文自動提詞篇

    🎈 標簽生成器 由于輸入正向提示詞 prompt 和反向提示詞 negative prompt 都是使用英文，所以對學習母語的我們非常不友好 使用網址：https://tinygeeker.github.io/p/ai-prompt-generator 這個網址是為了讓大家在使用 AI 繪畫的時候 ......

    uj5u.com 2023-04-20 07:43:36 more
  • 漫談前端自動化測驗演進之路及測驗工具分析

    隨著前端技術的不斷發展和應用程式的日益復雜，前端自動化測驗也在不斷演進。隨著 Web 應用程式變得越來越復雜，自動化測驗的需求也越來越高。如今，自動化測驗已經成為 Web 應用程式開發程序中不可或缺的一部分，它們可以幫助開發人員更快地發現和修復錯誤，提高應用程式的性能和可靠性。 ......

    uj5u.com 2023-04-20 07:43:16 more
  • CANN開發實踐：4個DVPP記憶體問題的典型案例解讀

    摘要：由于DVPP媒體資料處理功能對存放輸入、輸出資料的記憶體有更高的要求（例如，記憶體首地址128位元組對齊），因此需呼叫專用的記憶體申請介面，那么本期就分享幾個關于DVPP記憶體問題的典型案例，并給出原因分析及解決方法。 本文分享自華為云社區《FAQ_DVPP記憶體問題案例》，作者：昇騰CANN。 DVPP ......

    uj5u.com 2023-04-20 07:43:03 more
  • msf學習

    msf學習 以kali自帶的msf為例 一、msf核心模塊與功能 msf模塊都放在/usr/share/metasploit-framework/modules目錄下 1、auxiliary 輔助模塊，輔助滲透（埠掃描、登錄密碼爆破、漏洞驗證等） 2、encoders 編碼器模塊，主要包含各種編碼 ......

    uj5u.com 2023-04-20 07:42:59 more
  • Halcon軟體安裝與界面簡介

    1. 下載Halcon17版本到到本地 2. 雙擊安裝包后 3. 步驟如下 1.2 Halcon軟體安裝 界面分為四大塊 1. Halcon的五個助手 1) 影像采集助手：與相機連接，設定相機引數，采集影像 2) 標定助手：九點標定或是其它的標定，生成標定檔案及內參外參，可以將像素單位轉換為長度單位 ......

    uj5u.com 2023-04-20 07:42:17 more
  • 在MacOS下使用Unity3D開發游戲

    第一次發博客，先發一下我的游戲開發環境吧。 去年2月份買了一臺MacBookPro2021 M1pro(以下簡稱mbp)，這一年來一直在用mbp開發游戲。我大致分享一下我的開發工具以及使用體驗。 1、Unity 官網鏈接： https://unity.cn/releases 我一般使用的Apple ......

    uj5u.com 2023-04-20 07:40:19 more

Copyright © 2010-2020 有解無憂