建立個人博客白嫖推薦:
-
框架/主題:Hugo&MemE
-
原始碼托管:GitHub
-
網站持續集成部署:Netlify
-
網站DNS決議服務/免費CDN:Cloudflare
-
(可選)免費CDN:NodeCache&DDOS Guard
-
統計:百度統計/Google Analytics
白嫖成功,廢話不說開始建站!本文采用作業系統:Windows 10 2004 19587.1000,其他系統請舉一反三,采用Git BASH,

Hugo&MemE
首先,先去下載Hugo,在你看到這篇文章之前,你可能已經閱讀了許多建博客教程,也許是推薦使用Hexo,或是Typecho,也有可能是WordPress,Gridea,Ghost……但是!但是!為什么我要推薦一個知名度在國內都不如Hexo的網站框架呢?原因有3:
-
Hugo采用Go Lang網站生成速度快,文章多了完爆Hexo; -
支持持續集成部署;
-
最最重要的一點:
內置短代碼語言,可定制性極高!你可以看看本文的純文本版本,前面的加點字,便是自定義的短代碼,
注意:如果你跟隨本文教程搭建博客,那么請在Releases界面下載拓展版Hugo,檔案名如hugo_extended_X.Y.Z_SYS-64bit.zip,免安裝的,
下載后需要將它保存到一個固定的目錄,隨意,我不建議放到C:/Windows/System32下,因為Hugo更新的很勤,
下載保存解壓后在一個博客專用目錄(個人建議)下運行命令(CMD,Git BASH都可,推薦Git BASH,可執行命令比CMD多,):
其中,hugo代表這是一個HUGO指令(前提是要先將保存hugo.exe的檔案夾添加到環境變數,否則會報錯:
bash: hugo: command not found
教程:環境變數添加教程
當然,blog也可以自己修改名稱,
創建完一個博客檔案夾后,里面非常空曠:
│
├─archetypes
│ default.md
│
├─content
├─data
├─layouts
├─static
└─themes
這時候,我們就要下載一個主題了:我這里以MemE做示例,
把主題clone到本地:
$ git clone https://github.com/reuixiy/hugo-theme-meme.git themes/meme
其實我推薦這個主題是有原因的:
-
界面簡潔(如本站)
-
自帶許多配置功能
-
自帶
Service Worker&PWA -
......
配置/寫作本文便不再贅述,請參閱:
-
hugo+github博客搭建教程! | 百家號
-
使用Hugo搭建自己的博客 | 簡書
-
README | GitHub
-
Hugo 主題 MemE 檔案 | reuixiy
原始碼托管至GitHub
這個很簡單,在GitHub上面新建一個倉庫,名字隨便取,然后將你的整個博客檔案夾Push上去即可,

看到那個大綠按鈕了吧?!自己根據提示新建一個倉庫!
$ git init
$ git remote add origin <YOUR_REPO>
$ git add -A
$ git commit -m "init"
$ git push -u origin master
請在<YOUR_REPO>中填入你倉庫的.git地址!
看不懂的請參考廖雪峰的Git教程!
網站持續集成部署
請參考Hugo-MemE/Hexo(真)自動推送部署至Netlify
注意:以下兩個操作僅適用于有獨立域名的博主!
網站DNS決議服務/免費CDN
這個很簡單,只需要你在Cloudflare中創建一個賬號,然后點擊這個大大的按鈕即可:

按照提示將你域名的NS設定為它給你提供的NS地址,
免費CDN只需要你在添加決議時選中Proxied那坨云形圖案就可以了,

(可選)免費CDN
NodeCache有中文界面,自己搞??
DDOS Guard的配置可以參考我的這篇文章:DDOS-Guard免費CDN
統計
百度統計
打開百度統計官網,登錄后添加一個站點:

然后獲取代碼,把它插入到</head>標簽前即可,
官方提♂示:
-
請將代碼添加到網站全部頁面的標簽前,
-
建議在header.htm類似的頁頭模板頁面中安裝,以達到一處安裝,全站皆有的效果,
-
如需在JS檔案中呼叫統計分析代碼,請直接去掉以下代碼首尾的,
<script type="text/javascript">與</script>后,放入JS檔案中即可,
如果代碼安裝正確,一般20分鐘后,可以查看網站分析資料,
谷歌統計
谷歌統計官網:https://analytics.google.com
還是一樣的新增網站插入代碼??即可
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/51708.html
標籤:Html/Css
下一篇:[原創]jquery更換頭像
