博客搭建的步骤
要搭建个人博客,首先要了解具体要实施哪些步骤,需要哪些工具,在了解了这些之后,再根据自己的需要,就可以很清晰的搭建自己的理想博客了。
前置知识
- 静态网站和动态网站
静态网站:内容如果不被发布者修改源代码后,重新编译,重新生成。网站上的资源永远不会改变。(比如,一篇博客文章,不与用户有任何数据交互。)
动态网站:底层与数据库交互,有一些放在数据库中的动态资源是可以随着你的请求而产生变化。(比如: 一个登录页面。需要与底层数据库进行数据交换。)
- 网页生成器
我们在自己的电脑上写完了自己文章之后,我们想要把他放到网上供别人在线查看的话,基本上用户都会使用基于web的浏览器在线浏览你的博客。然而浏览器都是基于html的web页面。对于md格式的文本文件,浏览器无法直接展示在他的界面上。(也不是无法展示,而是他会以纯文本文件的形式展示。),如果你直接把这些文件放到网上(比如一个公开服务器上或者托管平台上)供其他人访问,他们看到的只能是界面丑陋,晦涩生硬的纯文本。
而html就是用来渲染这些文本,让他们更生动(比如有颜色,有图片,格式多样)更方便用户阅读。所以,我们写的博客要是能够转换成web页面,然后再放在网上让别人阅读,那就好了。
我能想到的最笨的写博客的方法就是,你直接把你的内容嵌套到html文件里。这样也就不用任何第三方工具了。(但这既费力又需要很强的知识储备。没人愿意这样干。)
所以静态网站生成器就是干这个工作的:他会把你的md文件,自动嵌入到web页面中。不用你自己手动做这些操作,你要做的就是使用这些工具,遵循他们的格式要求就可以生成一个静态网站了。
- 部署
上面说的网页生成器所做的事情是转换,资源仍然在你的本地电脑上,我们如何将资源放到网上呢?这个基本常识就是(将资源放到大家可以访问的Ip地址上,也就是自己的网站了。)
能做这件事的有很多:
- 自己购买一个云服务器,然后,将生成的静态资源直接放服务器的磁盘上,别人就可以通过IP地址访问你的资源。
- 通过一些托管平台(比如GitPage)本质上和服务器是一样的,只不过是别人帮你托管。
- 其他方式
完成上面所有步骤,网站部署大致流程就完成了。剩下的就是一些细节问题(比如,如何写博客,如何使用生成器生成自己想要的网站样式(模板))等等问题。
正式搭建
工具:使用md写博客,使用hexo生成网页,使用GItPage托管(部署)网站。
hexo 的使用
在有自己博客的前提下,开始下载hexo,生成静态网页。
- 安装:hexo是使用js写的平台,需要安装nodejs,并使用nodejs 包管理工具,NPM安装hexo软件。
1 | npm install -g hexo-cli |
- hexo是一个博客框架,首先需要生成一个初始博客模板(框架),命令为:
1 | hexo init blog_dir_name && cd my-blog |
- 这个框架就是hexo为你生成的一个静态网页模板,你可以在本地直接测试他的生成效果。你自己的网页基本也是这样。如果测试效果满意,就可以推送到服务器上,网站就建成了。本地测试命令(需要进入到博客根目录中)。
1 | hexo server |
这会在本地启动服务器,你可以通过浏览器访问相应的端口进行访问。
- 创建你的第一篇文章(帖子)
开始新帖子时,最好使用“草稿”功能。默认情况下,草稿不会发布,因此您可以自由更改其他帖子,同时保持未完成的草稿不公开。以下命令
1 | hexo new draft "My First Blog Post" |
草稿帖子都会放在./source/_drafts/目录下,默认名是你的标题名。
使用 hexo new 命令时,可以使用除“draft”之外的其他模板。查看 ./scaffolds/ 文件夹并阅读 Hexo 文档。
- 要编辑草稿,请导航至 ./source/_drafts/My-First-Blog-Post.md 并使用您最喜欢的 Markdown 编辑器打开该文件。
让我们在您的新帖子中添加副标题和一些段落内容……
1 | --- |
位于 Markdown 文件顶部的破折号之间的内容称为“front-matter”。它是 Hexo 和活动主题使用的元数据。有关更多信息,请参阅 Front-Matter 上的 Hexo 文档。
保存对 Markdown 文件的更改将被正在运行的 hexo 服务器自动检测并重新生成为静态 HTML 文件,但您必须刷新浏览器才能查看更改。
如果您不喜欢每次都手动刷新浏览器,hexo-livereload 或 hexo-browsersync 插件可以自动执行此操作。
- 安装
hexo-browsersync
插件(我个人最喜欢的):
1 | $ npm install hexo-browsersync --save |
其他 Hexo 插件可以使用 npm 以相同的方式轻松安装。许多插件都具有可以在项目的
_config.yml
文件中进行调整的配置。您需要查阅每个插件的文档以了解其特定的配置属性。对于 hexo-browsersync,默认设置可以正常工作,不需要编辑 _config.yml 文件。
一些写作技巧
- 显示更少的内容
假设您有一篇很长的文章,并且不喜欢整篇文章显示在列表页面中……
您可以使用 <!-- more -->
在 Markdown 中标记一个位置,以将其从列表页面中隐藏。它将被替换为“阅读更多”链接,该链接将打开文章的其余内容。
1 | --- |
- 插入图像
图像和其他资源文件可以放置在 ./source/ 文件夹下的子目录中。使用这张来自维基百科的原始 A-Team 图片作为测试。下载并保存到此路径:
./source/images/Ateam.jpg
编辑您的原始帖子,插入引用 /images/Ateam.jpg 的 Markdown 图像链接:
1 | --- |
您应该在浏览器中看到类似这样的内容:
Assets(就是你的图片什么的东西) can also be organized in folders for each post. It requires enabling the
post_asset_folder: true
setting in_config.yml
and some knowledge of its relative path referencing behavior. See the Hexo documentation on Asset Folders for more information.
- 发布草稿
当需要将草稿移至“实时”帖子以供全世界查看时,请使用 hexo 发布命令:
1 | hexo publish My-First-Blog-Post |
运行此命令时会发生一些事情:
markdown 文件 My-First-Blog-Post.md 从 ./source/_drafts/ 移动到 ./source/_posts。
文件的“front-matter”更改为包含发布日期:
1 | --- |
最后,准备整个站点以进行部署。运行hexo generate
命令:
1 | hexo generate |
运行网站所需的所有内容都将放置在 ./public
文件夹中。您已准备好将此文件夹传输到您的公共网络服务器或 CDN。
现在您已经了解了一般工作流程,接下来探索一些增强网站的其他方法:
- Commit your changes with Git so that you can always revert back to a good state if things go wrong. Read jr0cket’s guide for Managing your Hexo website with Git and Github.
- Customize your blog with various configuration settings inside the
_config.yml
file. - Automate your deployment to GitHub Pages, Heroku, Amazon S3, and other providers via the
hexo deploy
command. - Enhance the style and functionality of your articles with built-in tag plugins.
- Browse the growing catalog of community Hexo plugins.
- Reconfigure the default Hexo “landscape” theme, try out some of the other free themes that are available, or create your own.
- Migrate your old posts from another blog system (Wordpress, Jekyll, Octopress, etc.) to Hexo.
And to see the options for a particular command, use hexo help {command}
:
1 | $ hexo help new |
参考: