hexo环境变量_小白使用Github+Hexo从0搭建一个博客

最近有几位同学在公众号后台留言问我的博客站是怎么建站的&＃xff0c;思来想去&＃xff0c;还是写一篇从 0 开始吧。

前置准备

我们先聊一下前置准备&＃xff0c;可能很多同学一听说要自己搭一个博客系统&＃xff0c;直接就望而却步。不得有台服务器么&＃xff0c;不得搞个数据库么&＃xff0c;不需要域名备案么&＃xff1f;当然&＃xff0c;这些确实是建立一个博客站点需要的东西&＃xff0c;如果都没有&＃xff0c;问题倒是也不大。

首先&＃xff0c;Github 为我们做出了巨大的贡献&＃xff0c;直接帮我们解决服务器和域名问题&＃xff0c;当然&＃xff0c;在国内访问 Github 可能会有些慢&＃xff0c;但是国内有 Gitee 啊&＃xff0c;完全不逊色 Github 的好不好。

博客站的建立&＃xff0c;这时我们需要用到 Hexo &＃xff0c;这个博客框架没有那么的重量级&＃xff0c;它是使用 Markdown 直接来写文章&＃xff0c;然后可以将文章编译成静态页面&＃xff0c;编译完成后&＃xff0c;我们只需要将编译好的页面放在 Github 或者 Gitee 上&＃xff0c;就可以直接被访问到。这样&＃xff0c;我们就省去了一台数据库和服务器&＃xff0c;文章的内容、标题、标签等信息就无需放在数据库中了&＃xff0c;可以直接在静态页面上访问到。

那么&＃xff0c;接下来&＃xff0c;需要的就是一个 Github 或者 Gitee 的账号了&＃xff0c;这个我就不多讲&＃xff0c;大家自行准备吧。

环境安装

Node.js

Hexo 的编译环境是使用 Node.js 的&＃xff0c;需要在自己的电脑上安装 Node.js &＃xff0c;下载地址我直接贴出来&＃xff1a;头条外链发不出来&＃xff0c;大家可以访问原文看我个人博客站。各位直接选择自己对应系统的 Stable 版本安装就好。

windows 环境下载后一路 next 即可&＃xff0c;无需额外选择什么。安装完成后环境变量如未自动配置&＃xff0c;还需配置下环境变量&＃xff0c;配置完成后可以使用如下命令验证是否安装成功&＃xff1a;

博主安装的时间比较早&＃xff0c;版本比较老了&＃xff0c;各位领会精神。

Hexo

接下来我们安装 Hexo &＃xff0c;这是一个博客框架&＃xff0c;Hexo 官方还提供了一个命令行工具&＃xff0c;用于快速创建项目、页面、编译、部署 Hexo 博客&＃xff0c;所以在这之前我们需要先安装 Hexo 的命令行工具。

安装完成之后&＃xff0c;可以使用如下命令验证安装是否成功&＃xff1a;

博主这边的输出如下&＃xff1a;

创建项目

接下来到了重头戏的时间&＃xff0c;开始创建一个博客项目。

接下来&＃xff0c;我们使用 Hexo 在本地创建一个项目&＃xff0c;并在本地将这个项目整体跑通看看。

在一个自己喜欢的目录下创建项目&＃xff0c;使用以下命令&＃xff1a;

这里的 是项目名称&＃xff0c;使用自己喜欢的名称&＃xff0c;我这里使用 firstblog 。

静静等待进度条走完&＃xff0c;这样我们在 firstblog 这个文件夹中就有了 Hexo 初始化的相关文件。如图&＃xff1a;

进入这个文件夹中&＃xff0c;安装相关 node 依赖&＃xff1a;

接下来&＃xff0c;我们可以使用 generate 命令将刚刚生成的文件编译成静态 HTML 代码了。

可以看到输出结果里面包含了 js、css、font 等内容&＃xff0c;并发现他们都处在了项目根目录下的 public 文件夹下面了。

然后我们使用 Hexo 提供的 server 命令&＃xff0c;让博客在本地运行起来&＃xff0c;如下&＃xff1a;

服务默认会在 4000 端口&＃xff0c;直接在浏览器中访问&＃xff0c; 我们看下结果&＃xff1a;

到这里&＃xff0c;整个博客的架子就好了&＃xff0c;我们只使用了 3 个命令。

部署

接下来&＃xff0c;我们要将这个建好的博客部署到 Github Page 上验证一下可用。成功之后我们再进行一些其他的骚操作&＃xff0c;比如更换主题&＃xff0c;修改配置等等。

这里需要我们先在 Github 上创建一个仓库。

这里有一点需要注意&＃xff0c;GitHub Pages 允许每个账户创建一个名为 {username}.github.io 的仓库&＃xff0c;另外它还会自动为这个仓库分配一个 github.io 的二级域名。各位同学创建命名规则可以跟参照博主的命名方式。

仓库创建完成后&＃xff0c;接下来可以开始进行部署了&＃xff0c; Hexo 的部署命令&＃xff1a;

在部署前需要先安装一个插件&＃xff1a;

然后我们还需要配置一下本地项目的配置文件 _config.yml &＃xff0c;这个文件在本地项目目录的跟目录下&＃xff0c;打开修改最下面的部署的部分&＃xff1a;

# Deploymentdeploy: type: git repo: {git repo ssh address} branch: master

博主这边修改结果如下&＃xff1a;

# Deploymentdeploy: type: git repo: git&＃64;github.com:meteor1993/meteor1993.github.io.git branch: master

然后执行 hexo deploy 命令&＃xff0c;看到以下差不多的内容说明部署成功&＃xff1a;

这时&＃xff0c;我们就可以访问一下我们 Github Page 为我们分配的域名了&＃xff0c;比如我的仓库名称为 meteor1993.github.io &＃xff0c;那我这里就要访问&＃xff0c;头条外链发不出来&＃xff0c;大家可以访问原文看我个人博客站。

这时我们可以去 Github 仓库看下具体上传了什么内容&＃xff1a;

可以看到&＃xff0c;这里就是将我们 public 目录下的所有文件上传了&＃xff0c;Hexo 把编译之后的静态页面内容上传到 GitHub 的 master 分支上面去了。

站点配置

我们上面仅仅只是将初始化的页面部署成功了&＃xff0c;博客里还有一些站点的信息尚未配置&＃xff0c;这些站点信息是为了让搜索引擎知道我们的站点是做什么的。

同样是需要配置项目根目录的 _config.yml 文件&＃xff0c;打开这个文件&＃xff0c;找到 site 相关的配置信息。

小编这里的工程仅是做演示使用&＃xff0c;并无什么其他的作用&＃xff0c;就随便写写了&＃xff0c;各位同学可以根据自己的需要做配置&＃xff1a;

小编这里主要将语言设置成了中文&＃xff0c;我们看下修改后的博客长什么样&＃xff1a;

可以看到其中的时间日期格式变成了中文。这样我们就完成了博客的站点配置。

修改主题

目前默认的样式风格并不是那么好看&＃xff0c;如果想要换一下的话&＃xff0c;就涉及到了主题的修改。目前 Hexo 使用最多的一定是 Next 主题。当然&＃xff0c;小编的站点并不是使用的 Next 的主题。

接下来&＃xff0c;我们来看下如何在 Hexo 中使用 Next 主题。

首先我们需要将 Next 从 Github 上克隆下来&＃xff0c;命令如下&＃xff1a;

我们直接将这个主题克隆至项目的 themes 目录下。

克隆完成后&＃xff0c; Next 的源码就会出现在 themes 目录下。我们需要修改根目录下的 _config.yml 文件中的主题配置&＃xff0c;这样我们就可以使用刚才我们克隆好的 Next 主题了&＃xff1a;

# Extensionstheme: landscape

修改为&＃xff1a;

重启本地服务&＃xff0c;我们看下效果&＃xff1a;

主题配置

Next 主题同样为我们提供了丰富的配置&＃xff0c;供我们自定义自己的博客站点使用。

在目录 themesext 中&＃xff0c;找到 _config.yml 文件并打开。

Next 同样为我们准备了几种样式可供选择&＃xff1a;

这些样式同样都是黑白配色&＃xff0c;仅布局风格不同&＃xff0c;各位同学可以选择自己喜欢的布局风格。

关于 Next 的更多配置小编这里就不一一列举了&＃xff0c;属实有些多&＃xff0c;这里提供 Next 主题的官方文档&＃xff0c;是中文版的&＃xff0c;有需要修改的同学可自行参考。官方文档&＃xff0c;头条外链发不出来&＃xff0c;大家可以访问原文看我个人博客站。

添加文章

添加文章 Hexo 也为我们提供了相关的命令&＃xff0c;比如我们要添加一个名为 test 的文章&＃xff0c;如下&＃xff1a;

我们可以看到&＃xff0c;在 source_posts 的目录下&＃xff0c;创建了一个 test.md 的 Markdown 的文档。打开看下里面的内容&＃xff1a;

这些内容仅是自动创建的&＃xff0c;我们还可以添加其他的内容进去&＃xff0c;可以给各位同学看下我平时的文章头&＃xff1a;

开头下方撰写正文&＃xff0c;MarkDown 格式书写即可。

这样在下次编译的时候就会自动识别标题、时间、类别等等&＃xff0c;另外还有其他的一些参数设置&＃xff0c;可以参考官方文档&＃xff0c;头条外链发不出来&＃xff0c;大家可以访问原文看我个人博客站。

另外在创建新的文章的时候也不是一定要通过命令创建&＃xff0c;也可以自己在对应的目录下新建一个 .md 的文档&＃xff0c;Hexo 在编译的时候也是同样会识别的。

本篇文章在这里就分享结束了&＃xff0c;各位感兴趣的同学可以自己动手尝试一下。

题外话

小编自己的个人站点为了保持访问速度和稳定性&＃xff0c;部署在腾讯云上并使用了 CDN 加速&＃xff0c;并且映射了自己申请的域名&＃xff0c;其中比较困难的点是域名的备案和腾讯云是需要产生一定的费用的&＃xff0c;如果只是自己使用无需考虑稳定性和访问速度的话&＃xff0c;国内可以部署在 Gitee &＃xff0c;经测试是要比 Github 快很多。