從無到有免費擼一個博客(下)

連接Github

1. 首先,我們需要生成一個ssh密匙, 以linux為例:

<code>ssh-keygen/<code>
  1. 生成的ssh密匙在根目錄,.ssh文件夾下面,打開並且複製裡面的內容。


從無到有免費擼一個博客(下)


3.打開github,點擊頭像下面的小三角,點擊settings。


從無到有免費擼一個博客(下)


  1. 點擊SSH and GPG keys,然後點擊New SSH key,把你剛剛複製的內容粘貼進去,名字隨便取。


從無到有免費擼一個博客(下)


  1. 終端輸入下面的命令,測試是否成功。
<code>ssh -T [email protected]/<code>


從無到有免費擼一個博客(下)


安裝基本工具

安裝git

Windows直接去git官網下載exe安裝包即可。linux輸入命令安裝。

<code>sudo apt-get install git/<code> 

安裝nodejs和npm

1. 去nodejs官網(地址:https://nodejs.org/zh-cn/download/)下載Linux安裝包(Windows下exe),然後解壓

  1. 將node-v12xx重命名為node,然後複製到系統盤,我是放在/usr/share/目錄下
<code>sudo cp node /usr/share/node/<code>
  1. 將node文件夾,bin目錄下的node和npm設置到/usr/bin環境
<code>sudo ln -s /usr/share/node/npm  /usr/bin/npmsudo ln -s /usr/share/node/node  /usr/bin/node/<code>
  1. 輸入node和npm測試是否安裝成功。


從無到有免費擼一個博客(下)


  1. npm在國內訪問比較慢,可以換國內的淘寶源或者安裝cnpm,我這裡示範cnpm。npm install cnpm -g --registry=https://registry.npm.taobao.org
  2. 安裝完成後,就可以使用cnpm代替npm了。

安裝hexo

<code>cnpm install -g hexo-cli/<code>

使用hexo生成博客。

  1. 找到一個空白文件夾用於初始化項目,我是新建的一個hexo文件夾,然後在此文件夾打開終端。輸入下面的命名初始化項目。
<code>hexo initcnpm install/<code>
  1. 初始化成功的文件夾如下:


從無到有免費擼一個博客(下)

其中node_modeules為安裝的模塊文件,public為將要發佈的靜態網站。

source存放的是markdown文件,用於轉換靜態網頁。themes為主題。_config.yml為站點配置文件。

  1. 先初始化一個網站,命令如下:hexo g #用於將markdown文件轉靜態網站
    hexo s # 開啟本地web服務,可以用來預覽網頁。然後在本地輸入127.0.0.1:4000,查看網頁效果。自帶網頁為一個helloword的md。

更換並配置主題

1.下載主題,下載地址:ttps://github.com/hexojs/hexo/wiki/Themes

本人推薦用Next,比較簡潔:https://github.com/iissnan/hexo-theme-next

  1. 將主題丟到hexo的theme目錄。修改站點配置文件_config.yml,找到theme,後面改成next


從無到有免費擼一個博客(下)


3. 點擊theme/next目錄,修改_config.yml修改主題的默認樣式,自帶的是muse樣式,我選擇改成Pisces 修改主題菜單所對應的路徑,需要修改home,tags,categories,archives。


從無到有免費擼一個博客(下)


從無到有免費擼一個博客(下)


<code>- 其它修改方法請參考官網說明:http://theme-next.iissnan.com//<code>

部署到github

1. 複製你的github上的ssh地址,點擊use https,然後複製裡面的內容。


從無到有免費擼一個博客(下)


  1. 配置站點部署文件。打開hexo根目錄下的_config.yml
  1. 然後在最下面輸入以下信息
<code>deploy:  type: 'git'  repo: [email protected]:xx/xx.github.io.git  # 這裡替換成你的ssh地址  branch: master/<code>
  1. 最後在hexo目錄下,終端輸入以下命令部署網頁到github
<code>hexo clean # 清除緩存hexo g # 生成靜態網頁hexo d # 部署網頁到github/<code>

5.效果如下:


從無到有免費擼一個博客(下)

訪問地址:https://www.vbahome.cn

補充說明

1. 自定義域名在hexo的source文件夾下,新建一個CNAME文件,然後輸入你想要自定義的域名。然後在你的域名管理那裡新增一個CNAME解析,解析類型CNAME,解析地址就是你的github域名,

2. 圖片無法上傳到網頁安裝圖片解析插件cnpm install https://github.com/7ym0n/hexo-asset-image --save安裝Typora,去偏好設置-圖片設置兩個參數


從無到有免費擼一個博客(下)


  • 選中圖片,可以快速移動到文件名的相應位置下。這樣就可以快速把你的markdown圖片快速複製到本地對應目錄了。
  • 最終圖片形成的圖片路徑如下:
<code>![這裡隨便填](你的markdown文件名/xx.png)/<code>
  1. 安裝右下角的萌萌噠玩偶cnpm install --save hexo-helper-live2d
  2. 常用操作新建文章,文章會在source/_post中存在hexo new *文章標題* # 新建目錄頁面,目錄頁會在source/categories/index.mdhexo new categories 在裡面添加以下內容type: "categories"新建標籤頁面,標籤頁會在source/tags/index.mdhexo new tags在裡面添加以下內容type: "tags"注意:新建目錄和標籤都需要在主題菜單中配置好目錄文件,詳情請看上面的更換並配置主題,其中的Menu設置。
從無到有免費擼一個博客(下)


從無到有免費擼一個博客(下)


分享到:


相關文章: