用Hexo在碼雲上搭建個人博客

之前用新手價買過騰訊的域名和空間,用於搭建個人博客。後來呢?後來騰訊要我續費,還不給打折。預支給女友買糖的錢來買服務器良心不會痛嗎?
但是,有一個屬於自己的博客網站真的是比擁有一個可愛女友更幸福的事啊。於是在看了幾篇博客後,我選擇了用Hexo和碼雲來搭建個人博客

簡介

Hexo: Hexo 是一個快速、簡潔且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在幾秒內,即可利用靚麗的主題生成靜態網頁。
碼雲pages: 碼雲pages是一個靜態網站託管地方,再加上碼雲本來就是個代碼託管的地方,集成pages後,可以很方便的部署你的代碼

開始搭建

一、配置Hexo

  1. 安裝git

在cmd中使用git --version來查看git是否安裝成功
git --version

  1. 安裝node.js

在cmd中使用node --version來查看node.js是否安裝成功
node --version

  1. 安裝Hexo

用到node.js中的npm命令
在電腦桌面任意位置鼠標右鍵,打開Git Bash Here
git bash here
輸入命令:npm install -g hexo-cli
安裝完成後輸入hexo會得到下面這個頁面
hexo

二、本地運行

在安裝完Hexo之後,繼續在git命令窗口中依次執行命令

  • cd <folder> #說明:將操作位置轉移到將要存放項目的文件夾目錄(便於區分,我的項目文件夾名爲hexo1,位於F:\MySoftware\web-blog\hexo1。以下將使用這個文件夾)
  • hexo init #說明:自動在文件夾(hexo1)中創建項目所需的文件
  • npm install #說明:安裝依賴包
  • hexo generate #說明:構建,會在hexo1中創建public文件夾
    執行完以上命令後,會多出以下文件和文件夾
    在這裏插入圖片描述
  • hexo server #說明:啓動服務,關閉服務是ctrl+c
    然後到瀏覽器中輸入localhost:4000就可以看到下面這個界面了
    hexo server
    注:以上命令在直接使用win+r打開的cmd中執行可能不會正常響應,建議在git命令框(Git Bash Here)中執行,且爲了避免一些問題,應該在hexo1中鼠標右鍵打開Git Bash Here。若實在想用cmd,應該在用管理員身份打開的cmd中執行(找到system32目錄下的cmd.exe,鼠標右鍵,用管理員身份打開)
  • 最後在命令窗口按下ctrl+c關閉服務(會請求確認,輸入Y即可)

三、修改主題

上面我們在瀏覽器裏看到的網頁樣式只是官方默認的主題,不用這個的話可以在Hexo官網中下載別人做好的主題:https://hexo.io/themes/
themes
也可以直接搜索主題
在這裏插入圖片描述
鼠標放主題圖片上可以選擇預覽,點擊主題名(比如A-BOY)可以進入下載,我下載的是Smackdown
在這裏插入圖片描述
下載後的主題是zip壓縮文件,解壓到hexo1中的themes文件下
zip
local_themes
然後打開hexo1下的_config.yml文件,配置theme
config
將theme的值修改爲剛解壓好的主題文件的文件名(注:冒號後面有一個英語輸入法下的空格)
在這裏插入圖片描述
修改完成後,保存。然後打開git bash命令框(強調在hexo1中打開),依次輸入命令:

  • hexo generate
  • hexo server
    然後刷新網頁localhost:4000,就能看到界面已經改變了(圖片是網上找的,這就是主題Smackdown最初的樣子)
    在這裏插入圖片描述

四、發表博客

在發表博客之前,先說說hexo1下的source和public兩個文件夾

  • source文件夾:下面有子文件夾_posts,在_posts下面存放的是markdown文件(原本是有一個)
    在這裏插入圖片描述
  • public文件夾:下面的所有內容將被推送到碼雲中的指定倉庫中,這個之後說。主要是該文件夾中會保存所有我們在瀏覽器中看得到的html文件
    在這裏插入圖片描述
    所以我們編寫的博客應該保存爲markdown文件,然後將文件放到source/_posts下,由Hexo自動將該文件轉換成對應的html文件並保存到public文件夾中

下面來實現發表博客

  • 用markdown編輯器(我用的markdownpad2)編輯好一篇博客,然後保存爲home.md格式
    在這裏插入圖片描述
    注意:
    博客內部開頭要加

title: Self-discipline #說明:文章標題

date: 2019-08-13 17:00:00 #說明:文章日期格式:2018-05-30 15:20:36

tags: welcome #說明:文章標籤

categories: life #說明:文章分類

-------


冒號後面要有一個空格,categories後空一行,要有3個以上的 - (用來和文章內容區分)

  • 將編輯好的.md文件放到source/_pests/中
  • 打開git bash命令窗口(強調在hexo1中打開),依次執行命令:

>hexo clean
>hexo generate
>hexo server

最後刷新localhost:4000,就可以看到剛寫得文章了
在這裏插入圖片描述

五、部署到碼雲

如果沒有碼雲賬號的話,先註冊一個,碼雲官網:https://gitee.com/ 有了賬號可以直接進入下面步驟

  • 新建一個倉庫,用於存放即將部署的文件
    在這裏插入圖片描述
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 倉庫創建好後,複製https地址(作爲電腦本地和碼雲上倉庫遠程連接使用)
    在這裏插入圖片描述
  • 在git bash命令窗口執行命令:npm install hexo-deployer-git --save #說明:安裝插件—推送本地文件到遠程倉庫
  • 打開文件夾hexo1下的_config.yml。修改deploy的值(注:凡是修改_config.yml中的內容,都要記得在冒號後面必須有一個英文輸入法下的空格),將剛複製的https粘貼到repository後面
    在這裏插入圖片描述
  • 在git bash命令窗口中執行命令:hexo deploy #說明:將本地文件部署到碼雲
  • 隨後會讓輸入碼雲賬號和密碼
  • 完成後來到碼雲網站頁面,刷新頁面可以看到剛推送過來的所有提交
    在這裏插入圖片描述
  • 打開服務下面的Gitee Pages
    在這裏插入圖片描述
  • 直接啓動服務
    在這裏插入圖片描述
    在這裏插入圖片描述
  • 網站地址就是你的博客地址了,直接點擊,就能看到和localhost:4000一樣的界面了
    在這裏插入圖片描述

六、本地推送新的博客文章到碼雲

要發表一篇博客,在第四步的基礎上有點出入

  • 編寫markdown文件
  • 將編寫好的markdown文件放到source/_posts/中
  • 在git bash命令窗口依次執行命令:

>hexo clean #說明:清理。等價於hexo c
>hexo generate #說明:構建,生成html文件。等價於hexo g
>hexo deploy #說明:推送到碼雲。等價於hexo d

  • 在碼雲網站Pages頁面點擊更新
    在這裏插入圖片描述

到這裏,使用Hexo在碼雲上搭建個人博客就完成了

特別提示一下,關於配置文件_config.yml

  • 在hexo1根目錄下有一個(F:\MySoftware\web-blog\hexo1_config.yml)
  • 在主題文件中也有一個(F:\MySoftware\web-blog\hexo1\themes\hexo-theme-smackdown-master_config.yml)

具體修改了有什麼效果,打開看看就知道了

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