Hexo+Github搭建自己的博客

NO IMAGE

Hexo+Github搭建自己的博客

技術博客地址:DoubleDragon’s Blog
博客項目文件地址:github.com/wsl2ls/Wsl2…

目錄

一、 搭建環境
二、hexo創建本地博客
三、設置自己喜歡的博客主題
四、將本地博客部署到github
五、新建博客文章
六、接入Gitment評論系統

一、 搭建環境

1、下載安裝Node.js和Git
Hexo+Github搭建自己的博客

輔助命令:

    *   查看當前node版本號:`$ node -v`
*   清除node.js的cache:`$ sudo npm cache clean -f`
*   安裝n,用來管理node版本: `$ sudo npm install -g n`
*   安裝最新版本node:`$ sudo n stable`
*   查看當前git版本號:`$ git --version`
2、使用 npm 安裝 Hexo
  • $ npm install hexo-deployer-git –save
  • $ hexo version #查看Hexo的版本
    Hexo+Github搭建自己的博客

二、hexo創建本地博客

使用命令行創建博客:$ hexo init 博客項目名 ,這裡的博客項目名我用的是wsl.github.io,完成後,會在你的 /Users/yourname下創建一個wsl.github.io文件夾;然後可以通過命令行部署一下本地環境,然後就可以在瀏覽器中預覽本地博客了。

$ hexo init wsl.github.io   //創建本地博客
$  cd wsl.github.io  //進入博客目錄
$  hexo clean  //清除緩存
$  hexo g  // hexo generate重新生成代碼
$  hexo s  // hexo server 部署到本地,然後打開瀏覽器訪問 localhost:4000 查看效果

Hexo+Github搭建自己的博客
Hexo+Github搭建自己的博客

執行如下命令,生成靜態頁面至public目錄,開啟預覽訪問端口(默認端口4000,’ctrl + c’關閉server),打開瀏覽器訪問 http://localhost:4000 預覽默認博客主題效果

cd wsl.github.io  //進入博客目錄
hexo clean  //清除緩存
hexo g  // hexo generate重新生成代碼
hexo s  // hexo server 部署到本地,然後打開瀏覽器訪問 localhost:4000 查看效果

Hexo+Github搭建自己的博客

Hexo+Github搭建自己的博客

Hexo+Github搭建自己的博客

三、設置自己喜歡的博客主題

剛創建的博客默認使用的主題是landscape,不想用這個,咱換個
修改前,當然是先去獲取你喜歡的主題了。主題集合

cd wsl.github.io  //進入博客目錄
git clone https://github.com/iissnan/hexo-theme-next themes/next

Hexo+Github搭建自己的博客


注意:配置的文件內冒號:後面一定要有一個空格,否則無效,報錯。

  • 博客配置:用文本編輯器打開wsl.github.io文件內的_config.yml文件,修改內部參數。
title: DoubleDragon's Blog
subtitle: Rome was not built in one day.
Study hard and make progress every day.
description: ※ 微信公眾號:iOS2679114653
※ QQ:1685527540
author: 且行且珍惜_iOS
language: zh-Hans
#改為true後,當創建文章後,會自動一併創建一個同名的文件夾當做圖片文件夾
post_asset_folder: true
#設置主題
theme: next
deploy:
type: git
repository: https://github.com/wsl2ls/Wsl2Ls.github.io.git
brachanc: master
#這一行需要自己加,為博客頭像
avatar: "https://upload.jianshu.io/collections/images/1661007/艾瑪·沃特森.jpeg?imageMogr2/auto-orient/strip|imageView2/1/w/240/h/240"
cd wsl.github.io  //進入博客目錄
hexo clean  //清除緩存
hexo g  // hexo generate重新生成代碼
hexo s  // hexo server 部署到本地,然後打開瀏覽器訪問 localhost:4000 查看效果

Hexo+Github搭建自己的博客

四、將本地博客部署到Github

1、創建一個新項目Wsl2Ls.github.io,項目名必須為: 用戶名.github.io

Hexo+Github搭建自己的博客

2、點擊設置, 創建一個page,隨便選擇一個主題,我們馬上就用自己本地的主題把它覆蓋掉。

Hexo+Github搭建自己的博客

3、將我們Hexo的代碼部署到github上
  • 首先用文本編輯器打開wsl.github.io文件內的_config.yml文件,修改博客內部參數,然後保存。
deploy:
type: git
repository: https://github.com/wsl2ls/Wsl2Ls.github.io.git  //同步到新建的項目
brachanc: master
  • 通過命令部署到github上
npm install hexo-deployer-git --save  //先裝個插件壓壓驚
hexo d  //  hexo deploy 部署的命令,發佈到Github

Hexo+Github搭建自己的博客

4、部署完成之後,打開瀏覽器訪問 wsl2ls.github.io 查看效果。

五、新建博客文章

本地博客環境都配置完成了,接下來就是新建文章了,用命令 :hexo new “name”,在wsl.github.io/source/_posts目錄下生成 name.md文件,這個文件支持Markdown語法。
name.md文件打開之後 ,你的文章格式如下圖所示,才能正確的顯示時間,標題,分類等。當然如果你不需要這些東西,也可以不設置。

Hexo+Github搭建自己的博客

文章寫完之後, 通過如下命令後,打開瀏覽器訪問 localhost:4000預覽博客:

cd wsl.github.io  //進入博客目錄
hexo clean  //清除緩存
hexo g  // hexo generate 生成靜態頁面至public目錄
hexo s  // hexo server 部署到本地,然後打開瀏覽器訪問 localhost:4000 查看效果

預覽沒問題之後,就可以發佈了。

hexo d  //  hexo deploy 部署的命令,發佈到Github

六、接入Gitment評論系統

這裡我選擇接入Gitment,當然你也可以官方文檔 theme-next.iissnan.com/third-party… 接入其它三方評論系統。

Gitment的接入方法和步驟,直接看Gitment的開源大神https://imsun.net/posts/gitment-introduction/的介紹。

參考資料:
blog.csdn.net/Hoshea_chx/…
www.jianshu.com/p/8681ab76d…
www.cnblogs.com/sqlsec/p/he…
www.jianshu.com/p/57afa4844…
imsun.net/posts/gitme…

Hexo+Github搭建自己的博客

相關文章

數據結構與算法查找

數據結構與算法樹形結構

數據結構與算法線性表

數據結構與算法時間複雜度