前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >基于nodejs的Hexo框架快速搭建静态博客

基于nodejs的Hexo框架快速搭建静态博客

原创
作者头像
EatRice
修改2020-04-13 11:11:27
1.1K0
修改2020-04-13 11:11:27
举报
文章被收录于专栏:个人学习笔记

摘要和准备工作

我从很早以前开始就有搭建一个博客的想法,最早能够追溯到高中二年级。后来也陆陆续续尝试了搭建一群由静态页面组成的页面体系,后来发现这种页面体系有点坑,主要是但个网页的制作在页眉和页头处会有大量的相同的代码内容需要更改,而且该页面体系对于各种资源文件的路径特别敏感,很容易出错。再后来,学习的不断深入,还新学了C#的ASP.NET。这种框架的主要设计模式为动态网页开发,且这类网站挂载在IIS上,但是由于该网站服务依赖于独立的云计算资源,没钱续费,最后还是放弃了。。。经过无数次的尝试和体验,我终于发现了一个简单好用的网站框架,那就是hexo。下面就是我从0开始搭建我的hexo博客的来龙去脉。

这里使用的是 ubuntu 18.1 的操作系统对 hexo 框架的安装和在云端的 github 的部署。关于如何安装 hexo 框架,百度上已经有许多的相关教程和方法,如何在 github 部署,也有很多的相关教程,还有着很多官方文档。所以这里的hexo网站搭建教程,主要是用来介绍我在搭建网站的时候遇到的一些问题和最后的解决方案,以通过这些给自己或其他人提供相关的意见和建议。

主要流程

安装环境

安装nodejs参照 https://www.runoob.com/nodejs/nodejs-install-setup.html

安装git参照 https://www.runoob.com/git/git-install-setup.html

安装主题

我选用的主题为Fluid,该主题功能不是很多,但主要有优点使用简单,整体效果好等优点。如下是安装命令:

代码语言:javascript
复制
  $ cd blog    #进入博客所在的目录
  $ cd themes    #进入主题宝所在的目录
  $ git clone https://github.com/fluid-dev/hexo-theme-fluid.git    #克隆主题文件
  $ cd ../    #返回博客主目录
  $ vi _config.yml    #修改博客的主配置文件

安装好主题后可以在文件夹 themes 文件夹中即可查看。对于本次使用的主题 Fluid 需要对文件夹进行重命名,或在主文件目录下 config.yml 找到'theme'选项,改成theme: {你的主题名字}。同时我们会对主题文件会进行一些自定义的设置,为了避免配置在主题更新后失效,可以制定全局主题的配置文件: source/_data/fluid_config.yml 其中的内容可以直接从主题文件下的配置文件中复制粘贴。

在配置主题的配置文件中,随意增加或删除一些配置选项,或者文件内容的格式不符合文件的标准格式。hexo对此也能够继续进行生成和发布,但是其生成和发布的过程中会发生报错,所以,在一开始使用过程中发生了错误或问题,不妨检查一下配置文件的配置选项和格式标准。

评论功能

由于网站是静态的,所以可以使用第三方的评论系统。目前比较常用的有 disqus | valine | gitalk | utterances | changyan | livere 这里使用的是 valine 去官网注册一个账号,放在 Fluid 主题里面完全可以傻瓜式操作。来比力的评论插件有着很多的缺点,比如加载太过于慢了,还有其本身的样式也很丑。搭建博客的初衷是为了写作,所以就不为这个问题劳心劳力了,管他长啥样,重点不那儿!效果如图所示:

MarkDown撰写博客

hexo的文章标记语言MarkDown这语言之前都没有接触过的东西,作为一名业余选手,只能把自己以前写过的html连粘带贴地,直接应用到这里面来啦。就像博客的开篇起手式,卑微地敲着html。我学院有位已经毕业了的学长说使用Latex给我们做了一个论文模板,我觉得他做的工作和我现在做的工作差不多。另外关于写作问题,我还是研习一下的命令就行,其他的复杂格式用html代替便是:

MarkDown 语法格式可以参考: https://www.runoob.com/markdown/md-tutorial.html

部署

部署在Github

首先需要有一个Github账户,然后新建一个repository使用ReadMe.md来创建主分支matserrepository的名字就叫{user.name}.github.io设置完之后,直接访问这个地址,就能跳转到相应的链接啦。之后的问题就是把我们本地的储存库推送到云端。

首先,需要在你的Guthub账号设置里面添加在你计算机上生成的公钥,以便帮助云端识别你的设备,授予相应的权限。在Ubuntu的终端中输入以下指令:

代码语言:javascript
复制
  $  ls -al ~/.ssh    #检查本地公钥的存在
  >>  No such file or directory
  $  ssh-keygen -t rsa -C {your_email@example.com}    #使用邮箱生成公钥,并一路按下确定建
  $  cat  ~/.ssh/k8s_rsa.pub    #即可输出公钥的内容

然后将生成的公钥复制粘贴进公钥添加的页面中即可完成公钥的添加。如图所示:

之后我们只需要在本地的终端中输入

代码语言:javascript
复制
$  hexo clean
$  hexo generate
$  hexo deploy

即可成功发布。

部署在腾讯云COS上

往腾讯云部署,官方提供了npm包和操作文档,这里给出文档地址的引用:https://cloud.tencent.com/developer/article/1185253

为博客添加访问域名

在腾讯云购买自己喜欢的域名,购买地址:https://dnspod.cloud.tencent.com/

之后将购买的域名添加解析,解析到你所发布的博客地址即可,云解析的设置可以参考:https://blog.csdn.net/LY_Dengle/article/details/78106594

至此,一个简单的hexo博客安装,部署和发布的流程到此结束。来自吃白饭的休伯利安号,原文地址:https://eatrice.top/post/%E4%BB%8E0%E5%BC%80%E5%A7%8B%E6%90%AD%E5%BB%BA%E4%B8%80%E4%B8%AAhexo%E5%8D%9A%E5%AE%A2/

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 摘要和准备工作
  • 主要流程
    • 安装环境
      • 安装主题
        • 评论功能
          • MarkDown撰写博客
            • 部署
              • 部署在Github上
                • 部署在腾讯云COS上
                  • 为博客添加访问域名
                  相关产品与服务
                  对象存储
                  对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
                  领券
                  问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档