Open hylerrix opened 7 years ago
临夜写稿，将一直规划很久迟迟没有动笔的这一系列落实，也为今日清晨就要举办的前端社区活动做干货分享准备。我的这个学习模型，每当有一个技术主题出现，常常伴随着以下几个
每一次的技术分享都走遍了所有流程，回首看来，着实挺累，但也还算值得。
这一系列便来讲讲 Github Pages+ Hexo 搭建专属静态博客站点。
正如我之前的这篇文章 《如何写一篇优质的博客》 画图所示，网络博客在短短的几十年间得到了巨大的普及，传递着每一个故事。博客有一个最忠实的群体，那就是发明他们的人：程序员，或者叫做极客、黑客和软件工程师更能生动的形容他们对新技术的激情。
写博客的好处是我们用博客表达自己、升华自己。在我们学会写博客的同时还能提升我们的演讲、辩论能力。写博客的前期准备便需要我们能够对自己、对博客主题进行明确的定位以及对博客叙述的把控，达到最好的效果。
Weblog = Web + Log;
那静态博客是什么？通俗来讲，静态博客站点便是没有数据库没有后台交互的纯前台博客站点，哪怕是评论系统也是由第三方提供数据支持。静态博客站点常常作为 HTML 页面出现，可用博客制作器制作，Hexo 便是其中之一。相比有数据库有后台交互的动态博客站点来说，静态博客站点有如下好处：
省钱。静态网站占用的系统资源少。如果挂到github pages上，只要注册一个域名就可以了。 速度快。不经过php解析器，不用数据库，速度自然比动态网站快 安全。由于静态网站的简洁，免疫很多web攻击方式。 服务器端配置简单。只需要一个web server（apache、nginx）。 非常容易维护。
Git 是一个版本控制系统，可以用来随着时间变化跟踪一个项目中文件的改变。Git 代表性的功能就是记录文件有什么改变、谁做出的改、改变者对这次改变做出了怎样的阐述和说明等。Git 主要被各类软件开发项目所使用。
如下图所示，每一个文件代表着一次“保存”，没有了 Git，你就不能随意退回到曾经的某次修改之中。
有了 Git，改变将是多方向的，每一次修改都会得到保存，每一个保存都可以引发新的时间线，版本回退、分支管理、协作开发等功能都有了发展条件。
--everything-is-local
在基于 Git 的众多管理系统中， Github 是最突出的一个。Github 上有成千上万激动人心的卓越项目，我们可以轻松的下载项目源代码或 克隆这个项目到自己的仓库并进行自己的开发。目前最火的开源项目便是 freeCodeCamp，一个 JS 全栈在线学习平台。
Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服 务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默 认提供的域名 github.io 或者自定义域名来发布站点。Github Pages 支持自动利用第三方静态站点生成工具生成站点，也同样支持纯 HTML 文档，将你的静态站点托管在 Github Pages 上是一个不错的选择。
有很多静态站点的主题可供我们选择，根据这些主题所用的开发语言可以分为如下几类，可见我这里选择 Hexo 的原因在于 Hexo 基于 Node.js ，与我的前端技术栈相匹配且有一定的用户量，主题仓库里会得到很多及时的更新。
官网下载：https://nodejs.org/zh-cn/
Node.js®是一个基于Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。Node.js 之生态系统是目前最大的开源包管理系统。Hexo 博客制作器需要 node 和 npm 的环境。
官网下载：https://git-scm.com/
一般来说，Linux 和 MaxOS 都会默认集成 Git 的功能，进行版本控制。而在 Windows 下，常常需要下载 Git 客户端 -- Git Bash 来进行命令行操作。
安装过程中一路默认即可。
安装完 Node.js 和 Git，发现在 Git Bash 中输入 node -v 和 npm -v 提示命令不存在的报错信息，是我们在 Windows 下没有链接环境变量的缘故。打开环境变量的设置，在 PATH 变量后加入 Node 安装的目录即可。
node -v
npm -v
现在有了 Node 的 js 环境和 Git Bash 提供的命令行环境，开始着手安装 Hexo。
npm install -g hexo
以上命令会用 npm 的 node 包管理器将 hexo 安装到本地，-g 参数表明安装目录为本地的全局 npm 包中，而不是某个项目的 npm 包中。这时我们就可以使用 hexo 命令了。
-g
新建一个文件夹，并在这个文件夹中初始化 Hexo 站点。
mkdir test cd test hexo init
初始化过程较为缓慢，hexo 将会把核心站点仓库从远程服务器拉到本地，并默认配置好 landscape 主题，这个主题可以根据自己的爱好来去官网主题仓库挑选。hexo init 命令会在当前文件夹下生成如下目录：
hexo init
. ├── .deploy #需要部署的文件 ├── node_modules #Hexo插件 ├── public #生成的静态网页文件 ├── scaffolds #模板 ├── source #博客正文和其他源文件，404、favicon、CNAME 都应该放在这里 | ├── _drafts #草稿 | └── _posts #文章 ├── themes #主题 ├── _config.yml #全局配置文件 └── package.json
有了 Hexo 的本地博客站点，在可以进行快速的博客发布前，我们还得配置当前目录下的 _config.yml 文件，具体配置及简介如下。
# Hexo Configuration ## Docs: https://hexo.io/docs/configuration.html ## Source: https://github.com/hexojs/hexo/ # Site # 站点信息 title: 韩亦乐の博客集 # 标题 subtitle: 做最好的自己，影响该影响的人 # 副标题 description: 韩亦乐の博客集 # 站点描述，给搜索引擎看的 author: 韩亦乐 # 作者 email: icorvoh@qq.com # 电子邮箱 language: zh-cn # 语言 timezone: # URL # 链接格式 ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/' url: http://icorvoh.github.io/Blog # 网址 root: /Blog/ # 根目录 permalink: :year/:month/:day/:title/ # 文章的链接格式 permalink_defaults: # Directory # 目录 source_dir: source # 源文件目录 public_dir: public # 生成的网页文件目录 tag_dir: tags # 标签目录 archive_dir: archives # 存档目录 category_dir: categories # 分类目录 code_dir: downloads/code i18n_dir: :lang skip_render: # Writing new_post_name: :title.md # 新文章标题 default_layout: post # 默认的模板，包括 post、page、photo、draft titlecase: false # 标题转换成大写 external_link: false # 在新选项卡中打开连接 filename_case: 0 render_drafts: false post_asset_folder: false relative_link: false future: true highlight: # 语法高亮 enable: true # 是否启用 line_number: true # 显示行号 auto_detect: false tab_replace: # Category & Tag # 分类和标签 default_category: uncategorized # 默认分类 category_map: tag_map: # Archives # 2: 开启分页 # 1: 禁用分页 # 0: 全部禁用 archive: 2 category: 2 tag: 2 # Server # 本地服务器 # port: 4000 # 端口号 # server_ip: localhost # IP 地址 # logger: false # logger_format: dev # Date / Time format # 日期时间格式 ## Hexo uses Moment.js to parse and display date ## You can customize the date format as defined in ## http://momentjs.com/docs/#/displaying/format/ date_format: YYYY-MM-DD time_format: HH:mm:ss # Pagination # 分页 ## Set per_page to 0 to disable pagination per_page: 10 # 每页文章数，设置成 0 禁用分页 pagination_dir: page # Extensions ## Plugins: https://hexo.io/plugins/ ## Themes: https://hexo.io/themes/ theme: freemind.386 # 主题 plugins: # 插件，例如生成 RSS 和站点地图的 - hexo-generator-feed - hexo-generator-sitemap # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: git@github.com:icorvoh/Blog.git branch: gh-pages
配置好
hexo n == hexo new hexo g == hexo generate hexo s == hexo server hexo d == hexo deploy
hexo init Blog cd Blog npm install hexo-server --save npm install hexo-deployer-git --save git clone git@github.com:blackshow/hexo-theme-freemind.386.git themes/freemind.386 rm -rf themes/landscape vim _config.yml
https://github.com/litten/hexo-theme-yilia https://github.com/hexojs/hexo-theme-landscape https://github.com/wzpan/hexo-theme-freemind https://github.com/blackshow/hexo-theme-freemind.386 https://github.com/giscafer/hexo-theme-cafe
Hexo插件之百度主动提交链接
Hello，我是韩亦乐，现任本科软工男一枚。软件工程专业的一路学习中，我有很多感悟，也享受持续分享的过程。如果想了解更多或能及时收到我的最新文章，欢迎订阅我的个人微信号：韩亦乐。我的简书个人主页中，有我的订阅号二维码和 Github 主页地址；[我的知乎主页]中也会坚持产出，欢迎关注。 本文内部编号经由我的 Github 相关仓库统一管理；本文可能发布在多个平台但仅在上述仓库中长期维护；本文同时采用【知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议】进行许可。
临夜写稿，将一直规划很久迟迟没有动笔的这一系列落实，也为今日清晨就要举办的前端社区活动做干货分享准备。我的这个学习模型，每当有一个技术主题出现，常常伴随着以下几个
每一次的技术分享都走遍了所有流程，回首看来，着实挺累，但也还算值得。
这一系列便来讲讲 Github Pages+ Hexo 搭建专属静态博客站点。
1 博客与静态博客？
正如我之前的这篇文章 《如何写一篇优质的博客》 画图所示，网络博客在短短的几十年间得到了巨大的普及，传递着每一个故事。博客有一个最忠实的群体，那就是发明他们的人：程序员，或者叫做极客、黑客和软件工程师更能生动的形容他们对新技术的激情。
写博客的好处是我们用博客表达自己、升华自己。在我们学会写博客的同时还能提升我们的演讲、辩论能力。写博客的前期准备便需要我们能够对自己、对博客主题进行明确的定位以及对博客叙述的把控，达到最好的效果。
那静态博客是什么？通俗来讲，静态博客站点便是没有数据库没有后台交互的纯前台博客站点，哪怕是评论系统也是由第三方提供数据支持。静态博客站点常常作为 HTML 页面出现，可用博客制作器制作，Hexo 便是其中之一。相比有数据库有后台交互的动态博客站点来说，静态博客站点有如下好处：
Git、Github 和 Github Pages？
Git 是一个版本控制系统，可以用来随着时间变化跟踪一个项目中文件的改变。Git 代表性的功能就是记录文件有什么改变、谁做出的改、改变者对这次改变做出了怎样的阐述和说明等。Git 主要被各类软件开发项目所使用。
如下图所示，每一个文件代表着一次“保存”，没有了 Git，你就不能随意退回到曾经的某次修改之中。
有了 Git，改变将是多方向的，每一次修改都会得到保存，每一个保存都可以引发新的时间线，版本回退、分支管理、协作开发等功能都有了发展条件。
在基于 Git 的众多管理系统中， Github 是最突出的一个。Github 上有成千上万激动人心的卓越项目，我们可以轻松的下载项目源代码或 克隆这个项目到自己的仓库并进行自己的开发。目前最火的开源项目便是 freeCodeCamp，一个 JS 全栈在线学习平台。
Github Pages 是面向用户、组织和项目开放的公共静态页面搭建托管服 务，站点可以被免费托管在 Github 上，你可以选择使用 Github Pages 默 认提供的域名 github.io 或者自定义域名来发布站点。Github Pages 支持自动利用第三方静态站点生成工具生成站点，也同样支持纯 HTML 文档，将你的静态站点托管在 Github Pages 上是一个不错的选择。
Hexo？
有很多静态站点的主题可供我们选择，根据这些主题所用的开发语言可以分为如下几类，可见我这里选择 Hexo 的原因在于 Hexo 基于 Node.js ，与我的前端技术栈相匹配且有一定的用户量，主题仓库里会得到很多及时的更新。
开始实战
搭建 Node.js 开发环境
Node.js®是一个基于Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。Node.js 之生态系统是目前最大的开源包管理系统。Hexo 博客制作器需要 node 和 npm 的环境。
安装 Git 客户端
一般来说，Linux 和 MaxOS 都会默认集成 Git 的功能，进行版本控制。而在 Windows 下，常常需要下载 Git 客户端 -- Git Bash 来进行命令行操作。
安装过程中一路默认即可。
解决 git bash 中 node、npm 命令不存在的问题
安装完 Node.js 和 Git，发现在 Git Bash 中输入
node -v和npm -v提示命令不存在的报错信息，是我们在 Windows 下没有链接环境变量的缘故。打开环境变量的设置，在 PATH 变量后加入 Node 安装的目录即可。安装初始化 Hexo
现在有了 Node 的 js 环境和 Git Bash 提供的命令行环境，开始着手安装 Hexo。
以上命令会用 npm 的 node 包管理器将 hexo 安装到本地，
-g参数表明安装目录为本地的全局 npm 包中，而不是某个项目的 npm 包中。这时我们就可以使用 hexo 命令了。新建一个文件夹，并在这个文件夹中初始化 Hexo 站点。
初始化过程较为缓慢，hexo 将会把核心站点仓库从远程服务器拉到本地，并默认配置好 landscape 主题，这个主题可以根据自己的爱好来去官网主题仓库挑选。
hexo init命令会在当前文件夹下生成如下目录：有了 Hexo 的本地博客站点，在可以进行快速的博客发布前，我们还得配置当前目录下的 _config.yml 文件，具体配置及简介如下。
配置好
选择 Hexo 主题
Hexo 拓展
Hexo插件之百度主动提交链接