Hexo博客建立

使用hexo框架搭建blog

軟件準備

（1）Git

https://git-scm.com/

 

 

參考網址：

git安裝 http://www.javashuo.com/article/p-pelyxsdt-kv.html

Git配置http://www.xuanfengge.com/using-ssh-key-link-github-photo-tour.html

 

（2）Node.js      

https://nodejs.org/en/

 

安裝過程：

（1）Node安裝

按照安裝過程依次點擊便可，安裝過程很簡單。

（2）安裝Git

按照網上的安裝方式進行安裝就能夠了

http://www.javashuo.com/article/p-pelyxsdt-kv.html

（3）安裝Hexo   （下面出現的檢測所有是在git中進行的）

———————————————————————————————————————

檢測node安裝是否成功：

node -v

（返回版本號）

npm -v

（返回版本號）

 

———————————————————————————————————————

安裝淘寶的鏡像源（若是錯誤就重來，由於鏈接可能不穩定，不要懼怕多試幾回就能夠了）

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

檢測

cnpm

（返回cnpm的信息）

cnpm -v

（返回cnpm的版本信息）

安裝hexo（若是失敗從新來過就能夠了）

cnpm install -g hexo-cli

檢測

hexo -v

（返回hexo的版本信息）

 

初始化操做過程：

在本地創建blog文件夾

進入Git頁面

pwd   （查詢目錄所在位置）

mkdir Blog   （在目錄下創建文件夾Blog）（若是在之後的操做過程當中出現問題沒法解決就把這個文件夾刪掉直接從新來過就能夠了）

———————————————————————————————————————

 

cd Blog/   （進入Blog文件夾）

pwd    （檢測是否進入Blog文件夾）

———————————————————————————————————————

 

hexo init  （即：初始化hexo）

 

ls -l   （查看初始化得到的文件）

 

hexo s   （啓動hexo）

 

http://localhost:4000

這樣就能夠在本地4000端口查看本身的網站了

進一步深化操做過程1（將網站部署到Github上）

首先申請一個github帳號，而後再github中按照   本身的暱稱+.github.io 創建一個倉庫（repository）（例：hansonpang99.github.io）

 

 

在Blog目錄下安裝一個hexo部署插件

cnpm install --save hexo-deployer-git

 

找到Blog文件中的   _config.yml  文件，使用編譯器打開，建議使用   Visual Studio Code打開

注：Visual Studio Code的好處：1.支持的語言種類多，

                             2.視圖簡潔

                             3.擁有插件種類多

 

找到這部分代碼，（原始的是沒有repo，和branch的，並且type後面也沒有東西）

對這段代碼進行更改

type    一個名字，建議寫成git方便識別

repo    repository倉庫地址   將剛剛新建的github倉庫地址複製到這裏就能夠了

branch  分支這裏設置管理員  master

 

更改之後進行保存

而後再Git裏面輸入 hexo d     將本地文件部署到github新建的倉庫中

———————————————————————————————————————

 

而後經過訪問     https://+本身的倉庫名   就能夠訪問部署到github上的blog了

（例：https://hansonpang99.github.io）

進一步深化操做過程2（更換Blog的主題）

這裏以  yilia  主題爲例進行更換

———————————————————————————————————————

 

首先下載  yilia  主題

在Git中輸入  git clone http://github.com/litten/hexo-theme-yilia.git  themes/yilia

                                 （克隆地址）               （克隆以後的本地位置）

 

找到Blog文件中的   _config.yml  文件，使用編譯器打開，建議使用   Visual Studio Code打開

 

找到這部分代碼（即theme）

將冒號後面的內容改成剛剛新建的yilia

———————————————————————————————————————

hexo clean            清除數據庫之類

hexo g               生成靜態網站

hexo d               將如今的文件部署到github中

 

這樣就實現了主題的更改

進一步深化操做過程3（在建好的博客中添加相冊功能）

準備工做：

安裝python

下載地址：https://www.python.org/

 

下載完成後點擊安裝，安裝教程：

http://www.javashuo.com/article/p-nztfxehc-hn.html

在安裝時選擇自定義安裝，其餘注意事項如圖所示

 

安裝成功後，進行檢測，進入cmd中輸入  python

出現下圖所示界面，則證實安裝成功。

 

正式操做：

1.在github中建立一個新的倉庫，命名爲BlogBackup。

2. 將下面的github倉庫中的文件以zip格式下載到本地

倉庫地址：https://github.com/lawlite19/Blog-Back-Up

具體操做：

 

3.下載到本地後，在本地找一個合適的位置進行解壓。

解壓結果

 

4.進入解壓後的文件中，將min_photos和photos兩個文件夾中的照片所有刪除，並將本身要上傳的照片放到photos文件夾中，照片的命名規則爲：2015-05-01_XXX.jpg   （jpg可更改成其餘圖片格式）、

 

5. 在解壓後的文件中，使用Visaul Studio Code打開tool.py文件，並將文件中的地址改爲本身的博客文件夾中的data.json地址。

 

 

6. 在解壓後的文件中，右擊鼠標，點擊git bash here（出現該操做的前提是已安裝git）

 

7.將該文件提交到本身剛剛新建的github庫（BlogBackup）中

具體操做：

在打開的Git頁面中，

（1）輸入 git init   （把public文件夾轉成一個git倉庫）

git add . （git add -A） （把該文件夾中全部的東西加載到本地倉庫裏）

git commit -m 「test」    （提交信息）

git  remote add photo git@github.com:hansonpang99/BlogBackup.git

（加粗部分對應你的倉庫地址，如圖所示）

 

 

git push photo master  （將文件提交到github倉庫）

 

 

 

 

 

8.進入到你的博客目錄下使用Git執行 hexo new page "photos",就會出現一個這樣的新目錄

 

9.配置 Yilia 主題讓其顯示出來.在Blog/themes/yilia/_config.yml文件中這樣設置

 

 

10.將樣式文件放到photos文件夾下

樣式文件地址：

https://github.com/lawlite19/Blog-Back-Up/tree/master/blog_photos_copy 

 

修改樣式文件中的ins.js文件，主要是裏面的render函數

其中的url對應到你的github放圖片的地址（即第1步建立的倉庫地址）

 

11.進入圖片文件夾中（即下載的Blog-Back-Up-master文件夾中）使用tool.py腳本處理圖片

在Blog-Back-Up-master文件夾中打開Git頁面中，輸入  python tool.py  處理圖片

 

12.在本地的博客目錄下，打開git

輸入 hexo clean

     hexo g

     hexo s   （在本地檢測是否成功，成功後執行下一步，不然解決問題）

     hexo d    （將文件部署到github）

 

13．之後每次在photos中添加圖片後，重複11,12步就能夠完成部署到github了。

進一步深化操做過程4（添加背景音樂 （網易雲音樂））

1.打開網易雲音樂首頁，複製選擇的背景音樂分享外鏈

https://music.163.com/    在網易雲網頁中選中想要使用的音樂，進入播放界面，

點擊   「生成外鏈播放器」

 

（注：有版權的歌曲不能生成外鏈）

複製生成的代碼

 

二、引入播放器代碼

在themes/yilia/layout/_partial/left-col.ejs文件nav標籤中添加以下代碼

將代碼中的紅色部分和剛剛複製的網易雲外鏈代碼進行對照，將對應部分進行替換（不替換的話使用的是 紙短情長 歌曲）

 

<!-- 網易雲音樂插件 -->

<% if (theme.music && theme.music.enable){ %>

       <div style="position:absolute; bottom:120px left:auto; width:85%">

              <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width="240" height="52" src="//music.163.com/outchain/player?type=2&id=<%=theme.music.id||1334445174%>&auto=<%=theme.music.autoplay?1:0%>&height=32"></iframe>

       </div>

<% } %>

 

三、在yilia主題配置文件中添加屬性

 

# 網易雲音樂插件

music:

  enable: true

  #id: 1332647902  # 網易雲分享的ID

  autoplay: true  # 是否開啓自動播放

（注：在KeXueShangWang條件下，沒法自動播放）

參考網址：

https://zhousiwei.gitee.io/2019/05/09/Hexo%E5%8D%9A%E5%AE%A2yilia%E4%B8%BB%E9%A2%98%E6%B7%BB%E5%8A%A0%E8%83%8C%E6%99%AF%E9%9F%B3%E4%B9%90(%E7%BD%91%E6%98%93%E4%BA%91%E9%9F%B3%E4%B9%90)/

進一步深化操做過程5（添加helper-live2d動態模型）

參考網址：

https://zhousiwei.gitee.io/2019/05/05/Hexo%E5%8D%9A%E5%AE%A2%E6%B7%BB%E5%8A%A0helper-live2d%E5%8A%A8%E6%80%81%E6%A8%A1%E5%9E%8B%E6%8F%92%E4%BB%B6/

 

進行完這一步就能夠在hexo博客中看到了

 

這裏是默認的設置，若是想要安裝本身喜歡的就繼續網站教程

其餘板娘模板介紹：

https://huaji8.top/post/live2d-plugin-2.0/

挑選一個喜歡的板娘而後按照教程進行安裝。

 

注：下面這個主題須要是Darwin系統

 

只執行參考網址的第一步也能夠實現，保持默認就能夠了，我就是這樣。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

使用hugo框架搭建blog

下載hugo

https://github.com/gohugoio/hugo/releases

 

按照提示進行安裝

安裝成功之後進行檢測    hugo version

返回hugo的版本號

 

建立Blog

hugo new site myblog（本身命名能夠不是myblog）

 

 

進入myblog目錄

cd myblog/

 

 

更改主題

1.進入hugo官方主題頁面   themes.gohugo.io

2.選擇本身喜歡的blog主題，而後找到clone網址代碼，在git中進行clone

檢測：

1.進入到themes文件夾中

2.輸入ls，  返回剛剛下載的文件

3.返回上一目錄  cd ..

 

 

啓動hugo

以m10c爲例：hugo server -t m10c（剛剛主題保存的文件夾名稱） –-buildDrafts

 

 

 

 

建立文章

在myblog目錄下  輸入 hugo new post/blog.md（能夠改成其餘名字，這裏以blog爲例）（該操做目的是在post目錄下建立以blog爲名的markdown文件）

使用Visual Studio Code打開blog文件，對文件進行更改。

啓動hugo進行檢測

hugo server -t m10c（剛剛主題保存的文件夾名稱） –-buildDrafts

 

 

 

部署到遠端   github

在github中建立項目，項目名爲hansonpang.github.io

hugo --theme=m10c –baseUrl=https://hansonpang.github.io/  --buildDrafts

通過上面一步的操做後會在myblog主目錄下建立一個文件夾public

檢測：pwd（檢測是否在主目錄下）

 

cd public （進入public文件夾）

git init   （把public文件夾轉成一個git倉庫）

git add .  （把全部的東西加載到倉庫裏）

git commit -m 「個人hugo博客第一次提交」    （提交信息）

 

 

鏈接到github

git  remote add origin https://github.com/hansonpang/hansonpang.github.io.git

                            （公共的）（你的暱稱）  （倉庫名）        +.git

 

git  remote add origin https://github.com/hansonpang/hansonpang.github.io.git

                                                                                                                                          

 

推到遠端

git push -u origin master

須要輸入github用戶名，密碼

 

 

在操做過程當中可能會遇到一些問題，針對這些問題能夠參考一下連接

 

1.git中本地與遠程庫的關聯與取消

https://blog.csdn.net/wsycsdn19930512/article/details/50574217

2. git push 失敗與解決方法彙總

https://blog.csdn.net/trochiluses/article/details/23106561

 

若是你想要配置兩種框架的Blog，那麼你就須要申請兩個github（一個github針對一種框架Blog），這個時候你的git就要鏈接到兩個github上了，相關參考網站以下：

 

1.一臺電腦綁定兩個github賬號教程

https://www.jianshu.com/p/3fc93c16ad2d

2. 使用SSH密鑰鏈接Github【圖文教程】

http://www.xuanfengge.com/using-ssh-key-link-github-photo-tour.html

3. 同一客戶端下使用多個git帳號

https://www.jianshu.com/p/89cb26e5c3e8