hugo/github構建網站基本原理

• 1.hugo是一個靜態化的工具,你寫md,然後他把md轉換成對應樣式的html,
• 2.並給html嵌入百度統計的script.然後你將html放到github上,github可以支持靜態博客.你就擁有了自己的博客
• 3.用戶訪問時,觸發js統計代碼,上報給百度統計.

安裝配置hugo+githubpage站點

老宋專門寫了一本關於這個的書

參考 這個文檔有個坑,裏面訪問的url改成https的.如果按照文檔的http會導致發到github上後樣式加載不成功.

官網下載hugo, 是一個二進制程序,無任何依賴

- 將hugo放在可執行路徑
$ hugo version
Hugo Static Site Generator v0.36 windows/amd64 BuildDate: 2018-02-05T15:23:01Z


- 新建站點
mkdir sites
cd sites
hugo new site quickstart

- 新建文章
hugo new posts/ansible常用知識點.md

- 下載主題
cd themes
git clone https://github.com/halogenica/beautifulhugo.git

- 構建
hugo server --theme=beautifulhugo --buildDrafts


- 本地run
hugo server

- 構建public靜態文件,準備上傳html
hugo --theme=beautifulhugo --baseUrl="https://lannyMa.github.io/"

- 新建github,上傳代碼到github
現在github新建倉庫: <用戶名>.github.io,如我的是lannyMa.github.io

- 來到本地,上傳代碼
cd public
echo "# lannyMa.github.io" >> README.md
git init
git add -A
git commit -m "first commit"
git remote add origin https://github.com/lannyMa/lannyMa.github.io.git
git push -u origin master

- 然後訪問
https://lannyma.github.io/
 

hugo構建環境模板參考

以後部署

每次寫一遍md文檔,都需要構建,手動推送,這個是很大疼的,有deploy.sh.
正確姿勢是,直接執行sh deploy.sh "comment 一鍵部署

這裏我是win7,cmd不好用,我改用第三方cmder,這個執行命令比較像linux.

deploy.sh也很簡單

#/bin/bash
echo -e "\033[0;32mDeploying updates to GitHub...\033[0m"

msg="rebuilding site `date`"
if [ $# -eq 1  ]
    then msg="$1"
fi

git add -A
git commit -m "$msg"
git push origin master

# Build the project.
hugo # if using a theme, replace by `hugo -t <yourtheme>`
hugo-algolia

# Go To Public folder
cd public

# Add algolia search index
grep -v '"content":' algolia.json>maotai-blog.json
rm -f algolia.json

# Add changes to git.
git add -A

# Commit changes.

git commit -m "$msg"

# Push source and build repos.
git push origin master

cd ../
 

百度統計

這個玩意可以分析一些pv,uv等

申請免費域名(12個月)

參考: 免費的域名和證書
freenom.com

註: 域名的備案問題,如果在國內,如果域名指向了國內的服務器,則需要備案,如果域名cname到了github,則無需要.

maotai.ml 這是我的站點,我cname到了 lannyma.github.io了.

todo:

• 評論插件: giment
• algolia 搜索插件.
• cdn: cloudfare,需要執行域名cname配置才ok, freenom.com沒辦法搞

[tools]hugo&github構建靜態網站/百度統計