We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
临夜写稿,将一直规划很久迟迟没有动笔的这一系列落实,也为今日清晨就要举办的前端社区活动做干货分享准备。我的这个学习模型,每当有一个技术主题出现,常常伴随着以下几个
每一次的技术分享都走遍了所有流程,回首看来,着实挺累,但也还算值得。
这一系列便来讲讲 Github Pages+ Hexo 搭建专属静态博客站点。
正如我之前的这篇文章 《如何写一篇优质的博客》 画图所示,网络博客在短短的几十年间得到了巨大的普及,传递着每一个故事。博客有一个最忠实的群体,那就是发明他们的人:程序员,或者叫做极客、黑客和软件工程师更能生动的形容他们对新技术的激情。
写博客的好处是我们用博客表达自己、升华自己。在我们学会写博客的同时还能提升我们的演讲、辩论能力。写博客的前期准备便需要我们能够对自己、对博客主题进行明确的定位以及对博客叙述的把控,达到最好的效果。
Weblog = Web + Log;
那静态博客是什么?通俗来讲,静态博客站点便是没有数据库没有后台交互的纯前台博客站点,哪怕是评论系统也是由第三方提供数据支持。静态博客站点常常作为 HTML 页面出现,可用博客制作器制作,Hexo 便是其中之一。相比有数据库有后台交互的动态博客站点来说,静态博客站点有如下好处:
省钱。静态网站占用的系统资源少。如果挂到github pages上,只要注册一个域名就可以了。
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
Hexo插件之百度主动提交链接
Hello,我是韩亦乐,现任本科软工男一枚。软件工程专业的一路学习中,我有很多感悟,也享受持续分享的过程。如果想了解更多或能及时收到我的最新文章,欢迎订阅我的个人微信号:韩亦乐。我的简书个人主页中,有我的订阅号二维码和 Github 主页地址;[我的知乎主页]中也会坚持产出,欢迎关注。 本文内部编号经由我的 Github 相关仓库统一管理;本文可能发布在多个平台但仅在上述仓库中长期维护;本文同时采用【知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议】进行许可。
The text was updated successfully, but these errors were encountered:
No branches or pull requests
临夜写稿,将一直规划很久迟迟没有动笔的这一系列落实,也为今日清晨就要举办的前端社区活动做干货分享准备。我的这个学习模型,每当有一个技术主题出现,常常伴随着以下几个
每一次的技术分享都走遍了所有流程,回首看来,着实挺累,但也还算值得。
这一系列便来讲讲 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插件之百度主动提交链接
The text was updated successfully, but these errors were encountered: