【個人博客 hexo】一個小時就搭好屬於自己的博客

對於經常需要發博客的小夥伴來說,擁有一個屬於自己的博客網站,聽起來是不是很酷。

今天我就來告訴大家,怎麼搭建一個屬於自己的博客網站,我們需要的就是使用hexo+github來搭建我們自己博客系統。

你能學到什麼?

  1. 輕鬆搭建自己的博客網站
  2. hexo的基本寫作

@

目錄

  • 你能學到什麼?
  • 什麼是Hexo?
  • 什麼是github?
  • 為什麼選擇hexo和github
  • 一:準備
    • 1、安裝git
    • 2、安裝NodeJs
    • 3、查看git和node版本:
    • 4、安裝hexo(使用npm)
  • 二、搭建博客
    • 1、創建倉庫
    • 2、配置ssh
    • 2、博客初始化
    • 3、博客生成
    • 4、上傳至github
  • 三:寫作
    • 1、創建新文章
    • 2、語法
  • 作者有話

什麼是Hexo?

Hexo是一個快速,簡單且功能強大的博客框架。相信經常用Markdown寫文章的人肯定不會陌生,使用Markdown(或其他標記語言)編寫帖子,然後Hexo會在幾秒鐘內生成帶有精美主題的靜態文件。

什麼是github?

GitHub是一個面向開源及私有軟件項目的託管平台,因為只支持git 作為唯一的版本庫格式進行託管,故名GitHub。
GitHub於2008年4月10日正式上線,除了Git代碼倉庫託管及基本的 Web管理界面以外,還提供了訂閱、討論組、文本渲染、在線文件編輯器、協作圖譜(報表)、代碼片段分享(Gist)等功能。目前,其註冊用戶已經超過350萬,託管版本數量也是非常之多,其中不乏知名開源項目 Ruby on Rails、jQuery、python 等。

為什麼選擇hexo和github

  • 1、全是靜態文件,不需要書寫自己的後台邏輯,訪問速度快
  • 2、免費方便,不用花一分錢就可以搭建一個自己的個人博客
  • 3、可以集成很多的插件,只需要簡單配置
  • 4、樣式多樣可選,hexo有很多主題可供用戶選擇
  • 5、自定義域名,可以綁定自己的域名
  • 6、數據絕對安全,基於github的版本管理,歷史版本可隨意恢復
  • 7、數據容易遷移

@

目錄

  • 你能學到什麼?
  • 什麼是Hexo?
  • 什麼是github?
  • 為什麼選擇hexo和github
  • 一:準備
    • 1、安裝git
    • 2、安裝NodeJs
    • 3、查看git和node版本:
    • 4、安裝hexo(使用npm)
  • 二、搭建博客
    • 1、創建倉庫
    • 2、配置ssh
    • 2、博客初始化
    • 3、博客生成
    • 4、上傳至github
  • 三:寫作
    • 1、創建新文章
    • 2、語法
  • 作者有話

一:準備

安裝Hexo非常容易,並且只需要以下內容:

  • Node.js(至少應為Node.js 8.10,建議為10.0或更高版本)
  • git

如果您的計算機已經有這些,恭喜!您可以直接跳到Hexo安裝步驟。

如果沒有,請按照以下說明安裝所有要求。

1、安裝git

下載:傳送門

2、安裝NodeJs

下載:傳送門

唯一需要注意的是請確保已選中添加到PATH(默認情況下已選中)。

3、查看git和node版本:

4、安裝hexo(使用npm)

使用npm i -g hexo來安裝,一步到位,查看hexo版本。

二、搭建博客

1、創建倉庫

前提是你的有一個自己的github賬號,這年頭,誰沒有個github賬號。

注意:創建一個名為username .github.io的存儲庫,其中username是您在GitHub上的用戶名。如果您已經上傳到其他存儲庫,請重命名該存儲庫。

例如我的github名字是zero028,那麼我的倉庫名就是zero028.github.io,因為我寫這篇文章的時候,我已經創建過了,所以他會報錯已存在。

2、配置ssh

如果你要使用遠程從你的電腦上傳文件至你的github倉庫,那麼,你就需要配置ssh

1、配置全局變量
git config --global user.name "你自己的名字"

git config --global user.email "你自己的郵箱"

2、生成ssh密鑰
ssh-keygen -t rsa -C "你自己的郵箱"

將你用戶目錄下.ssh/id_rsa.pub里的全部東西粘貼到key裏面,名字隨便取。

id_rsa.pub一般windows會在C:\Users\用戶名\.ssh目錄下

驗證:輸入ssh -T git@github.com,如果出現以下信息即為配置成功,到這裏你已經成功了一大半了。

2、博客初始化

在一個空的文件夾內打開cmd,使用hexo init 進行初始化,他會下載一大堆東西。

目錄結構:
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

說明:

  • node_modules:是依賴包
  • public:存放的是生成的頁面
  • scaffolds:命令生成文章等的模板
  • source:用命令創建的各種文章
  • themes:博客使用的主題
  • _config.yml:整個博客的配置
  • db.json:source解析所得到的
  • package.json:項目所需模塊項目的配置信息

3、博客生成

只需要三句話你就能看到你的博客

1、清除
hexo clean
2、生成
hexo g
3、啟動服務
hexo server

這時候你打開,http://localhost:4000,噹噹噹噹,那麼你就大功告成了。到這裏,你看一下你的watch,有沒有一個小時,如果超過了的話,當我前面沒說(手動狗頭)。

4、上傳至github

當然,如果只能自己看到,這遠遠是不夠的,我們發博客就是為了讓我們的文章能夠幫助到更多人,這時候你就需要上傳到github進行託管,這樣別人就可以訪問到你的博客,看到你的文章了。

你需要在你的根目錄下的_config.yml配置

# Deployment
## Docs: https://hexo.io/docs/deployment.html
deploy:
  type: git
  repo: https://github.com/zero028/zero028.github.io.git(你自己的git)
  branch: master

然後使用hexo d 或者 hexo deploy上傳,它實現的原理就是將您的Hexo文件夾的文件推送到存儲庫。public/默認情況下,該文件夾不是(也不應該)上傳的,請確保該.gitignore文件包含public/行。文件夾結構應與此存儲庫大致相似,但不包含.gitmodules文件

1、在此之前請先安裝一個插件
npm install hexo-deployer-git --save

2、部署(上傳到GitHub)
hexo d 或者 hexo deploy

最終,你可以使用你的https://username.github.io訪問,例如我的是https://zero028.github.io,咦,我的怎麼和你的不一樣,那是我配置了域名和使用了其他的主題,如果你想知道我是怎麼設置的,請持續關注,謝謝。

三:寫作

1、創建新文章

要創建新帖子或新頁面,可以運行以下命令:

$ hexo new [layout] <title>

例如
$ hexo new hello
INFO  Created: D:\Projects\HEXO\text\source\_posts\hello.md

他就會在source/_posts目錄下生成一個md文件hello.md

post是默認設置layout,但您可以提供自己的。您可以通過在中編輯default_layout設置來更改默認布局_config.yml

2、語法

前題是文件開頭的YAML或JSON塊,用於配置作品的設置。使用YAML編寫時,前題以三個破折號結尾,而使用JSON編寫時,則以三個分號結尾。

---
title: hello
date: 2020-04-07 19:12:39
---


正文。。。。。

設置及其默認值:

設置 描述 默認
layout 布局
title 標題 文件名(僅帖子)
date 發布日期 文件創建日期
updated 更新日期 文件更新日期
comments 為帖子啟用評論功能 true
tags 標籤(不適用於頁面)
categories 類別(不適用於頁面)
permalink 覆蓋帖子的默認永久鏈接
keywords 僅在meta標籤和Open Graph中使用的關鍵字(不推薦)

分類和標籤

只有帖子支持類別和標籤的使用。類別按順序應用於職位,從而導致分類和子分類的層次結構。標籤均在同一層次級別上定義,因此它們的显示順序並不重要。

類別:
-  運動
-  棒球
標籤:
-  傷害
-  搏鬥
-  令人震驚

如果要應用多個類別層次結構,請使用名稱列表而不是單個名稱。如果Hexo看到在帖子上以此方式定義的任何類別,則它將該帖子的每個類別視為其自己的獨立層次結構。

類別:
-  [體育, 棒球] 
-  [美國職棒大聯盟, 美國 聯盟, 波士頓 紅 紅襪] 
-  [美國職棒大聯盟, 美國的 同盟, 新的 紐約 洋基隊] 
-  對抗

作者有話

嗯,確實是挺簡單的,前面我花了大量的時間為自己搭建了一個博客網站,從前端到後端都是自己完成,然而,實現的也只是剛好能用而已,很多的體驗都不是很完善。

而使用hexo就可以輕鬆搭建自己的博客,而且學習成本四舍五入為零。

最後,還是那句話,你的支持就是作者最大的動力。
關注公眾號:博奧思園 ,精彩內容不錯失

本站聲明:網站內容來源於博客園,如有侵權,請聯繫我們,我們將及時處理

【其他文章推薦】

網頁設計一頭霧水該從何著手呢? 台北網頁設計公司幫您輕鬆架站!

※台北網頁設計公司全省服務真心推薦

※想知道最厲害的網頁設計公司"嚨底家"!

※推薦評價好的iphone維修中心

網頁設計最專業,超強功能平台可客製化

※別再煩惱如何寫文案,掌握八大原則!

您可能也會喜歡…