其实很多人都想过有一个属于自己的网站,无奈因为技术门槛,大多数人都没能实现这个小小的心愿。
说实话,对于技术人或者是互联网从业者来说,一个属于自己的个人网站是很常见的,由于我们通常会将其用于记录我们的一些笔记、知识、生活等等,因此也会将其称为博客。
“博客”这个词,说起来也有点儿久远了,甚至现在很多人都已经不知道这个词,它其实是一个音译词,英文叫“Blog”,而这个词也是一个混成词,源自“Web Log”,即网络日志,更早期的音译其实叫“部落格”,是一种通常由个人管理、不定期张贴新文章的网站。
国内也有很多博客写作平台,比如偏技术向的『CSDN』和『掘金』,偏大众向的『简书』等等,注册个账号就能开始写作,那为什么还要自己动手去搭建一个博客呢?
从我个人看来,有三个原因:
- 广告。商业平台需要盈利,广告是重要的来源,平台往往会向作者的博客插入广告而不需要经过作者的同意。
- 样式。商业平台通常对于所有的博客,都只会提供单一的页面展示样式,没有个性化定制。
- 监管。文章发表在商业平台,就必须受到平台的监管。以微信公众平台为例,微信每年清理的微信文章不计其数,除掉绝大部分造谣、抄袭的垃圾文章外,还有极小部分揭露社会黑暗的文章因为某些不可描述的原因而被删除。
如果你也有同样的顾虑,可以尝试跟随我的脚步,搭建一个属于自己的个人博客。
Hexo
在开源社区各路大神的努力下,已经诞生了不少博客框架,我按照我个人的喜好,选择了『Hexo』,你也可以选择其他框架搭建。
『Hexo』官网对于这个框架的描述是:
A fast, simple & powerful blog framework
快速、简洁且高效的博客框架
同时,还介绍了几个优点:
- 超快速度。Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
- 支持 Markdown。Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
- 一键部署。只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
- 插件和可扩展性。强大的 API 带来无限的可能,与数种模板引擎(EJS,Pug,Nunjucks)和工具(Babel,PostCSS,Less/Sass)轻易集成。
尽管我认同『Hexo』的确是一个优秀的博客框架,但在这里我必须要泼一下冷水:
- 网页的加载速度还依赖于实际网络情况。
- 不支持 Markdown 的博客框架算不上博客框架。
- 绝大多数的优秀博客框架都支持一键部署。
- 拥有插件扩展的博客框架才算优秀框架。
总之,『Hexo』满足了优秀博客框架的条件,接下来我就带你利用『Hexo』一步一步搭建自己的博客。
工具
Node.js
上面也提到,『Hexo』是基于 Node.js 的,它是一个基于 Chrome V8 引擎 的 JavaScript 运行时,不懂没有关系,你只需要下载安装即可。
其实 Node.js 在之前『Windows 平台 React Native 开发环境搭建笔记』中也有介绍过,如果感觉使用过程中网速不理想可以参考切换国内镜像源。
建议使用 LTS 版本。
Git
Git 也是我们程序员的老朋友了,它可以帮助我们拉取相关文件以及将博客部署到网上去,也只需要下载安装即可。
新版本的 Git 已经默认勾选「Run Git from Windows Command Prompt」了,也就是说可以自动添加到环境变量。
macOS 中安装 Git 则更为方便,直接在『Terminal』中输入 git
命令就会自动提示安装。
环境
只需安装以上两个软件,我们就已经准备好工具啦,接下来在任意终端(你可以使用刚刚下载的『Git Bash』,或者系统自带的『CMD』、『Windows PowerShell』、『Terminal』等)输入以下命令:
➜ npm install -g hexo-cli
该命令会安装『Hexo』及其相关命令,等待一小会环境就安装完成啦。
建站
你可能会觉得前面的准备工作太过简单,或许这正是『Hexo』的优点,但接下来才是我们的重点工作。
『Hexo』环境安装完成后,我们在终端执行:
➜ hexo init <folder>
<folder>
是我们想要将整个博客环境存放的目录路径,这个命令会加载对应的文件到该文件夹下,你可能会好奇这些文件是从哪里来的,『Hexo』的 Github 项目中有一个叫「hexo-starter」的 Repo,所有的包文件都在其中。
执行完上述命令之后很可能会有相关错误,比如无法安装相应的包扩展文件等,我们可以进入刚刚生成的该文件夹把没有安装上的包再安装一遍:
这样就把所需要的包和文件安装完成,指定文件夹的目录结构如下:
. ├── _config.yml ├── package.json ├── scaffolds ├── source | ├── _drafts | └── _posts └── themes
「_config.yml」是网站的配置信息,可以在此配置大部分的参数。
「package.json」是应用程序的信息,EJS、Stylus 和 Markdown renderer 皆已默认安装。
「scaffolds」是模版文件夹。当您新建文章时,『Hexo』会根据「scaffolds」来建立文件。『Hexo』的模板是指在新建的 Markdown 文件中默认填充的内容。
「source」是资源文件夹,存放用户资源的地方。除「_posts」文件夹之外,开头命名为 _
(下划线)的文件、文件夹和隐藏的文件将会被忽略。Markdown 和 HTML 文件会被解析并放到「public」文件夹,而其他文件会被拷贝过去。
「themes」是主题文件夹,『Hexo』会根据主题来生成静态页面。
接下来就可以生成我们的网站页面了,在创建的项目文件夹根目录下,执行命令:
➜ hexo generate
因为单词比较长容易输错,『Hexo』支持用简写的方式执行命令,上面这条命令可以简写成:
➜ hexo g
如果你使用『Windows PowerShell』的话可能会遇到输出信息缺失的情况:
不用太担心,这只是『Hexo』命令显示不兼容『Windows PowerShell』的缘故,所以我还是比较习惯用『Git Bash』,不过『Git Bash』省略了比较多的信息,你也可以使用『CMD』,它会显示完整的信息。无论你使用哪个终端,只要它没有报错,我们的命令都是正常执行的。
该命令执行完成后,可以发现目录下多了一个名为「public」的文件夹,该目录就是生成的网站。
这时候再执行命令:
➜ hexo server
或者简写:
➜ hexo s
在浏览器中访问网址:http://localhost:4000,就可以查看刚刚生成的网站。
我们的网站就建立起来了!