快速搭建個人博客網站——Hexo

 

目錄

Hexo

安裝步驟流程

Hexo主題介紹

我現在使用的主題爲Butterfly

博客的編寫

GitHub

上傳文件到Github

配置靜態站點

從csdn遷移博客到hexo


Hexo

hexo是一款快速、簡潔且高效的博客框架,Hexo 使用MarkDown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。

  1. 超快速度
    1. Node.js 所帶來的超快生成速度,讓上百個頁面在幾秒內瞬間完成渲染。
  2. 支持 Markdown
    1. Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多數插件。
  3. 一鍵部署
    1. 只需一條指令即可部署到 GitHub Pages, Heroku 或其他平臺。
  4. 插件和可擴展性
    1. 強大的 API 帶來無限的可能,與數種模板引擎(EJS,Pug,Nunjucks)和工具(Babel,PostCSS,Less/Sass)輕易集成

安裝步驟流程

我使用VS code工具,先創建一個文件夾Hexo,然後打開終端。

使用前可以先看看git環境是否配置完成,命令是:git --version

之後使用npm install hexo-cli -g 對hexo進行全局安裝,可以使用hexo --version或者hexo -v去查看是否安裝完成

然後使用hexo init進行初始化配置,這一步是爲了把hexo從GitHub中克隆到新建出來的Hexo文件夾當中。

之後使用npm install對一些需要補充的包進行下載,這一步需要下載的包並不多。

現在最基本的hexo就已經搭建好了,可以使用hexo server命令去運行,默認的端口號是4000,如果端口號被佔用了,可以去關閉該端口號或者 hexo server -p 5000 命令來指定端口。

網頁運行的效果: 

可以使用hexo g命令去生成靜態網站文件,這些靜態文件將會生成在public文件夾下面,與vue cli相類似,vue cli進行npm run build打包之後也會生成靜態文件在public中。

hexo s命令則是屬於本地服務器預覽命令

hexo d命令可以將文件發佈到git

 

Hexo主題介紹

hexo博客中有很多主題,在Hexo的官網中,對於博客主題就存在306種主題。

你可以去找到一個適合自己的主題,然後去點擊主題名進入GitHub當中。然後一般會給你提供git克隆命令

比如Nexmoe主題

使用教程地址:https://docs.nexmoe.com/hexo-nexmoe/start

我現在使用的主題爲Butterfly

可以參考API文檔:

https://www.lucfzy.com/2020/02/butterfly-theme/#代碼複製

https://jerryc.me/posts/4aa8abbe/#%E5%81%B4%E9%82%8A%E6%8E%92%E7%89%88

 

將網頁的文字設置成爲中文簡體

站點配置文件_config.yml 是 hexo 工作目錄下的主配置文件
butterfly.yml 是 Butterfly 的配置文件。它需要你手動將主題目錄下的_config.yml 文件復製到 hexo 工作目錄的 source/_data/butterfly.yml 中。如果文件或者文件夾不存在,需要手動創建。
語言
修改站點配置文件 _config.yml

默認語言是 en

主題支持三種語言

  • default(en)
  • zh-CN (簡體中文)
  • zh-TW (繁體中文)

效果: 

關於頁面右上方導航欄的更改可以在主題文件的_config.yml中更改menu

效果:

 

其他部分的更改都可以去查看參考文檔:https://jerryc.me/posts/4aa8abbe/#%E8%AA%9E%E8%A8%80

博客的編寫

在hexo中的博客是通過markdown的形式進行編寫的,你可以自己去下載markdown文件編輯器,也可以直接在VS code中進行編輯,這些博客都存放在根目錄source文件夾的_post文件夾下

---
title: links
date: 2020/5/3 20:46:25
layout: py
permalink: PY.html
cover: https://i.loli.net/2019/07/21/5d33d5dc1531213134.png
coverWidth: 1200
coverHeight: 750
hide_copyright: true
categories: 
- 測試
tags:
- 測試
- links
---

 

GitHub

部署項目到GitHub中

先創建一個GitHub倉庫new repository,這是在GitHub中右上角點擊+號

在這裏給倉庫取名時,最好將倉庫設置成爲以下格式

username.github.io

這裏的username可以使用GitHub名字

在Hexo文件夾的終端中輸入

ssh-keygen -t rsa

可以進行公鑰的配置

在C盤/用戶/用戶名/.ssh目錄下找到id_rsa.pub文件,用文本編輯工具打開,並複製所有文本內容。

在Github頁面右上角,點擊用戶頭像-Settings-SSH and GPG keys-New SSH key

Title可以隨意填寫,Key需要填寫剛纔複製的公鑰文本內容。

添加完成後,在控制檯輸入:

ssh -T [email protected]

如果配置成功,可以看到成功的回覆。

如果提示Are you sure you want to continue connecting (yes/no)?,輸入yes,然後會看到:

上傳文件到Github

配置根目錄下_config.yml中的repo信息

比如

deploy:
  type: git
  repository: [email protected]:liuxianan/liuxianan.github.io.git
  branch: master

直接通過hexo來發布到github,還需要安裝一個插件:

npm install hexo-deployer-git --save

之後通過hexo d命令進行發佈即可

 此時重新刷新GitHub倉庫即可看到文件已經上傳

 

配置靜態站點

點擊Settings,進入GitHub Pages配置,由於之前新建倉庫的時候,倉庫名爲username.github.io,github已經自己爲我們發佈了靜態的頁面。如果不是username.github.io的格式,則需要手動配置。

可以對網站進行訪問了 https://kongchengji.github.io/

 

從csdn遷移博客到hexo

https://github.com/flytam/CsdnSyncHexo

 

一起學習,一起進步 -.- ,如有錯誤,可以發評論

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章