[TOC] # 其他靜態站點方案 ## Docusaurus [Docusaurus](https://docusaurus.io/zh-CN) 是 Faecbook 專門為開源項目開發者提供的一款易于維護的靜態網站創建工具，使用 Markdown 即可更新網站 [Docusaurus – 5 分鐘為開源項目創建一個靜態網站，文檔、API 一應俱全](https://www.appinn.com/docusaurus/) ## Gatsbyjs 快速的React 靜態站點生成器。 https://www.gatsbyjs.org ## 使用 [Reptar](http://reptar.github.io) 靜態站點生成器 # JAMStack https://jamstack.org/examples/) ## 靜態站點生成器的統計 [https://staticsitegenerators.net](https://staticsitegenerators.net/) [https://www.staticgen.com/](https://www.staticgen.com/) 有機會準備玩玩[http://metalsmith.io](http://metalsmith.io/) [2018 年，如何選擇最好的靜態站點生成器](https://juejin.im/post/5b47079bf265da0faa3655be) # [碼云Pages](http://git.mydoc.io/?t=154714) 碼云 Pages 是一個免費的靜態網頁托管服務，您可以使用 碼云 Pages 托管博客、項目官網等靜態網頁。如果您使用過 Github Pages 那么您會很快上手使用碼云的 Pages服務。 之所以沒有使用 GitHub Pages，還是因為天朝有時候訪問不到，所以推薦 https://gitee.com 或者 https://coding.net 。 ## 創建一個自己的站點 一般 Pages 分為： **用戶 Pages、項目Pages** 。 如果你想以根目錄的形式訪問自己的靜態網站，只需要建立一個與自己個性地址同名的項目即可，如 https://gitee.com/chandlerver5 這個用戶，想要創建一個自己的站點，但不想以子目錄的方式訪問，想以 https://chandlerver5.gitee.com/ 直接訪問，那么他就可以創建一個名字為 `chandlerver5` 的項目 https://gitee.com/chandlerver5/chandlerver5 部署完成后，就可以以 http://chandlerver5.gitee.io 或者 http://chandlerver5.oschina.io 進行訪問了。 以下來自 Coding： | Coding Pages 類型 | Pages 默認分配的 URL | 允許的部署來源 | | --- | --- | --- | | 用戶 Pages | {user_name}.coding.me | master 分支 | | 項目 Pages | {user_name}.coding.me/{project_name} | master 分支、coding-pages 分支、或master 分支中的/docs 目錄 **最終博客地址：http://chandlerver5.gitee.io** # 使用[Hugo](https://gohugo.io/)靜態站點生成 Hugo 是 GO 語言編寫的靜態站點系統。其生成速度快，且在較好支持博客和非博客內容的同時提供了比較完備的主題系統。無論是自己寫主題還是套用別人的主題都比較順手。 ## 安裝 https://gohugo.io/getting-started/installing ## 選擇主題 主題：https://themes.gohugo.io/ 源地址： https://github.com/gohugoio/hugoThemes 推薦一下幾種： https://themes.gohugo.io/purehugo/ https://github.com/tmaiaroto/hugo-redlounge ## 步驟 ~~~ hugo new site ChandlerVer5-blogs ~~~ 然后hugo會在文件夾`ChandlerVer5-blogs`下，自動生成這樣一個目錄結構： ```css ? archetypes/ ? content/ ? data/ ? layouts/ ? static/ ? themes/ config.toml ``` `config.toml`是網站的配置文件，這是一個TOML文件，全稱是Tom’s Obvious, Minimal Language，這是它的作者GitHub聯合創始人Tom Preston-Werner 覺得`YAML`不夠優雅，搗鼓出來的一個新格式。 還需要一些初始化操作： ~~~ cd ChandlerVer5-blogs git init git submodule add https://themes.gohugo.io/hugo-hello-programmer-theme themes/hello-programmer ~~~ ## 創建一個頁面 PS：VSCode有 hugo 的插件，但是個人覺得不如直接命令行方便... ~~~ hugo new about.md ~~~ 如果是博客日志，最好將md文件放在content的post目錄里。 ~~~ hugo new posts/my-first-post.md ~~~ 執行完后，會在content/post目錄自動生成一個MarkDown格式的first.md文件： ~~~ --- title: "My First Post" date: 2017-09-30T19:24:23+08:00 draft: true --- ~~~ 添加一點東西，修改為： ~~~ --- title: "My First Post" date: 2017-09-30T19:24:23+08:00 draft: true --- # 標題 今天開始使用Pages服務,和使用Hugo靜態站點生產 ~~~ ## 開啟服務，本地瀏覽 ~~~ hugo server -D ~~~ 打開地址：http://localhost:1313/. ## 部署 假設你需要部署在 Gitee Pages 上，首先在碼云上創建一個Repository，命名為：http://chandlerver5.gitee.io （coderzh替換為你的github用戶名）。 在站點根目錄執行 Hugo 命令生成最終頁面： ~~~ hugo ~~~ 如果一切順利，所有靜態頁面都會生成到 `public` 目錄，將`pubilc`目錄里所有文件 `push` 到剛創建的Repository的 master 分支。- ~~~ cd public git init git remote add origin https://gitee.com/chandlerver5/chandlerver5.git git add -A git commit -m "first commit" git push -u origin master ~~~ 瀏覽器里訪問：http://chandlerver5.gitee.io 還可以添加一個`sh`腳本為您自動執行前面的步驟，`deploy.sh` 腳本： ```sh #!/bin/bash echo -e "\033[0;32mDeploying updates to GitHub...\033[0m" # Build the project. hugo # if using a theme, replace with `hugo -t <YOURTHEME>` # Go To Public folder cd public # Add changes to git. git add . # Commit changes. msg="rebuilding site `date`" if [ $# -eq 1 ] then msg="$1" fi git commit -m "$msg" # Push source and build repos. git push origin master # Come Back up to the Project Root cd .. ``` 由于我們只需public 目錄下生成的文件。所以需要在public目錄下，進行`git init`，目的只上傳public下的文件。 ## 配置和維護站點 ### [內容目錄-TOC](https://gohugo.io/content-management/toc/) Hugo可以自動解析Markdown內容，并創建可在模板中使用的內容表 ### 語法高亮- [highlightjs](http://highlightjs.org/) Hugo官方說明中采用Pygments來進行 代碼高亮的支持，在部署機上安裝Pygments，個人覺得這個方法不好。于是換另一外一種js代碼法，即采用 highlightjs的方法支持代碼高亮。 highlightjs同樣很強大，支持135種語言（關鍵是支持Golang）和60多種樣式（有我喜愛的github樣式和monokai_sublime樣式），但不支持line number。 ### 國內CDN 1. [css.net](https://www.css.net/) 2. [BootCDN](http://www.bootcdn.cn/) 使用的時候，您只需要替換`fonts.googleapis.com`為`fonts.cat.net`即可，如 ```html <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet'> ``` 替換成 ```html <link href='https://fonts.cat.net/css?family=Open+Sans' rel='stylesheet'> ``` 字體的設置在各個`css`文件中，謹慎調整。 ### 搜索 對的，靜態網站也可以索引，進行搜索。 https://lunrjs.com/ ### 根據時間列出文章列表 首頁直接顯示時間的post ### 評論（不需要） [如何評價「多說」即將關閉？有什么替代方案？](https://www.zhihu.com/question/57426274) ### 統計代碼（不需要） 提供統計服務的站點，比如statcounter.com一般都會提供安裝代碼（js）的，將那段代碼copy到tonybai.com/themes/hyde/layouts/partials/head.html中即可。 ### 音樂 網易云外鏈播放-iframe插件 ```html <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=63200&auto=0&height=66"></iframe> ``` ### 圖床 推薦使用七牛（10G空間，免費）。 ### 404頁面 GitHub Pages有提供制作404頁面的指引：[Custom 404 Pages](https://help.github.com/articles/custom-404-Pages)。 直接在根目錄下創建自己的 404.html 或者 404.md 就可以。但是自定義404頁面僅對綁定頂級域名的項目才起作用。 推薦使用[騰訊公益404](http://www.qq.com/404)。 # 提一提 [hexo](https://hexo.io/themes/) hexo出自臺灣大學生[tommy351](http://twitter.com/tommy351)之手，是一個基于Node.js的靜態博客程序，其編譯上百篇文字只需要幾秒。hexo生成的靜態網頁可以直接放到GitHub Pages，BAE，SAE等平臺上。先看看tommy是如何吐槽Octopress的 →＿→ [Hexo颯爽登場](http://zespia.tw/blog/2012/10/11/hexo-debut)。 # 附錄A ## 關于tag 和 category 作者：水八口 鏈接：https://www.zhihu.com/question/20651310/answer/36191694 來源：知乎 根據本人大于五次的博客整改經驗，在博客界，tag 一般和 category 搭配使用。比如： ~~~ category: photography tag1: portrait tag2: landscape tag3: street ...... category: design tag1: web tag2: graphic ...... ~~~ 也就是說，category 定義大分類，tag 定義此 category 下的小分類。這么一來應該比較詳細且系統。很多人寫博客有固定的 category，但 tag 都是隨手加的，這就導致查找的時候不知道如何下手。解決這個問題的一個死腦筋辦法就是，把這些 categories 和 tags 用樹形圖記錄下來，留個檔，當記憶模糊的時候可以查看。 關于 tag 的數量，我覺得還是根據不同的人的情況而定。比如我是一個攝影師，我的 tag 可能就局限在攝影類詞匯。而如果我是跨越攝影和設計界的，那么 tag 數量就會多很多。重要的還是對所管理內容的把握，以及將來發展性的預測。比如我現在是一名設計師兼攝影師，最近在學繪畫，將來可能在這一領域也有內容展示，那么這個結構就要為添加繪畫領域而留好空位或者易于添加。 關于如何判定一個 tag 是否應該建立，個人認為在此 tag 下的以往內容+將來內容若是大于5篇，便可以建立。小于5篇的話應該可以記得住吧。另外還有一種曲線救國的辦法，就是在文章中安插關鍵字，這么一來即使沒有 tag，全文搜索也能找到相對應文章。 # 附錄B 靜態網站托管 Learn and use [Github Pages](https://pages.github.com/) to host your pages and sites: essentially a free, hosted, live version of your front-end repositories. [Using static site generators at scale](https://www.smashingmagazine.com/2016/08/using-a-static-site-generator-at-scale-lessons-learned/): specifically, Jekyll. Great read. [Jekyll on Firebase](https://chris.banes.me/2017/06/02/jekyll-firebase/), a great post talking about deploying a Jekyll site to be hosted on Firebase. Great for Firebase newbies as well. [Netlify](https://www.netlify.com/), static site hosting for free for personal projects [Gatsby](https://www.gatsbyjs.org/), static single-page sites with React # 參考 [Hugo中文文檔-文章列表](http://www.gohugo.org/post/) [hosting-on-github](https://gohugo.io/hosting-and-deployment/hosting-on-github/) https://www.git-tower.com/learn/build-your-own-blog/development/installing-kirby#start https://getkirby.com/ [Ghost ](http://www.ghostchina.com/) [Jekyll](https://jekyllrb.com) is a blog-aware, static site generator in Ruby http://www.jianshu.com/p/15ae47eddc56