[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