前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Hexo博客搭建

Hexo博客搭建

作者头像
Bess Croft
发布2020-04-03 16:39:07
7310
发布2020-04-03 16:39:07
举报
文章被收录于专栏:贝丝的专栏

写在前面

为什么网上这么多教程,我还要在这里写下一篇呢?主要是总结大家的经验和自己的操作过程,一来是方便自己看,二来是给大家提供一些参考。Google一下,你可以找到几乎所有你想看到的,但是能否为你带来实质性的解决方案,可能也是需要花时间的。而且,跟别人做一样的操作,可能就刚好是你出了问题。。。没错,说的就是我自己。写这篇文章,仅此以纪念从WordPress转到Hexo。

博客搭建

适合哪些人呢?

  • 平常喜欢写作,尤其是Blog的人。有不少人通过Hexo发表文学类作品呢。
  • 不害怕编程,且爱折腾的人
  • 了解和能够使用版本控制Git和GitHub的人
  • 熟悉基本的MarkDown语法,能够利用MarkDown和Typora写作的人

准备工作

安装环境
  1. Node.js下载,并安装到您的计算机上。
  2. Git下载,并安装到您的计算机上。 不会下载安装?没关系,点击链接去它们的官网,有非常详细的安装教程。或者,我也可以抽时间写,但是感觉这样的文章质量并不高啊!
安装Hexo

这时候我们需要利用npm来安装了。(直接打开Git Bash,或者任意位置鼠标右键选择打开)

运行如下命令:

代码语言:javascript
复制
npm install -g hexo

如果报错,出现

代码语言:javascript
复制
npm ERR! registry error parsing json

的话,可能需要设置npm代理,执行如下命令

代码语言:javascript
复制
npm config set registry http://registry.cnpmjs.org

然后删除刚才安装的npm目录,

代码语言:javascript
复制
hexo:command not found

重新执行第一条命令安装Hexo,不过,这第一步都能报错,脸是有多黑啊!!!

初始化Hexo

在命令行接着运行以下命令

代码语言:javascript
复制
$ hexo init <folder>    //创建\初始化hexo文件夹
$ cd <folder>      
$ npm install    //安装依赖包

这里的是你自己指定的文件夹,比如说我的就是这样:

代码语言:javascript
复制
$ hexo init G:hexo
$ cd G:hexo
$ npm install

这样说你应该更容易理解,这就相当于选择安装软件的位置。

本地查看

新建完成后,指定文件夹的目录如下:

代码语言:javascript
复制
.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

在命令行执行如下命令,然后打开你的浏览器输入http://localhost:4000/即可查看。

代码语言:javascript
复制
hexo generate     
hexo server

到这一步,你的本地博客基本上就搭建起来了。我第一次搭建成功时,简直是兴奋的飞起了!

注意事项详解
  • hexo相关命令均在站点目录下,用Git Bash运行。
  • _config.yml是站点的配置文件,用来存放网站的配置信息,可以在此配置大部分的参数。路径为:
代码语言:javascript
复制
<folder>\_config.yml
  • 也就是你的站点的根目录下。
  • 还有个叫_config.yml的,是你的主题配置文件,千万别弄混了。路径为:
代码语言:javascript
复制
<folder>\themes\<主题文件夹>\_config.yml

就存放在你的主题根目录下

  • scaffolds是模板文件夹。当你新建文章的时候,Hexo 会根据 scaffold 来建立文件。
  • source是资源文件夹,是存放用户资源的地方。
  • themes,没错,就是存放主题的文件夹,今后你可能要无数次的打开它。

网站搭建实施方案

GithubPages
  1. 创建一个GitHub账号,如果你有一个更好。
  2. 创建一个仓库,名字必须为:<Github账号名称>.github.io
  1. 图中报错的细节就不要在意了,这个仓库只能创建一个,当时我创建的时候没有截图。为了方便理解,专门去打开了这个页面截了一张图。
  2. 将本地Hexo博客推送到GithubPages 3.1.安装hexo-deployer-git插件。在命令行(即Git Bash)运行以下命令即可: $ npm install hexo-deployer-git --save3.2.添加SSH Key 3.2.1.创建一个SSH Key。在命令行输入一下命令,密码为空,敲击三下回车: $ ssh-keygen -t rsa -C "邮箱地址"3.2.2.把公钥添加到GitHub。复制密钥文件内容,路径形如: C:\Users\Administrator(也就是你的账户名)\.ssh\id_rsa.pub
  1. 然后粘贴到SSH keys即可。 3.2.3.测试是否添加成功。在命令行输入以下命令: $ ssh -T git@github.com $ yes返回“You’re successfully authenticated”,就说明你添加成功啦! 3.3.修改你的站点配置文件_config.yml(前面说过了在你的站点目录下)。文件末尾修改为: # Deployment ## Docs: https://hexo.io/docs/deployment.html deploy: type: git repo: git@github.com:<Github账号名称>/<Github账号名称>.github.io.git branch: master仓库地址填写ssh地址,比如我的: deploy: - type: git repo: git@github.com:kingdragonyjl/kingdragonyjl.github.io.git barnch: master3.4.然后我们要推送到GitHubPages。在命令行(即Git Bash),输入以下命令,注意,这个命令请记下来。以后你会经常用到的。 $ hexo g $ hexo d如果返回: INFO Deploy done: git即推送成功啦!然后稍等片刻,浏览器访问地址: https://<Github账号名称>.github.io然后,嗯嗯~ o( ̄▽ ̄)o,到这里就成功了啦,是不是很开心?
GithubPages + 域名

这一步最重要的就是买域名了,买个域名先!

  1. 打开你的域名提供商的控制台,设置域名解析。 1.1.解析类型选择为CNAME; 1.2.主机记录,就是你的域名前缀,填写www即可; 1.3.记录值去复制你的<Github账号名称>.github.io填上去; 1.4.线路解析,就默认的就行了。
  2. 仓库设置 2.1.打开你的博客仓库设置,都到这一步了别告诉我你不知道在哪儿。

然后再该页面中往下滑,找到图中的位置!

  1. 我相信你看到页面上的提示,能够非常容易地添加自定义域名并开启 https 的!
GithubPages + CodingPages + 域名

你还可以在CodingPages上也搭建仓库,推送到仓库的时候2个仓库是同步推送的呢!

  1. 创建你的Coding账号
  2. 一样要创建一个用来托管的仓库,而且仓库名为:<Coding账号名称>
  3. 将你的Hexo博客给推送到CodingPages 3.1.之前大家在创建GitHubPages时,我们是已经做过生成公钥这一步了。这时候找到它,复制内容,并粘贴到Coding的新增公钥。 3.2.然后我们来测试以下成功了没有。在命令行依次输入如下命令: $ ssh -T git@git.coding.net $ yes返回了“You’ve successfully authenticated”,就表示已经成功了! 3.3.修改你的站点配置文件_config.yml(前面说过了在你的站点目录下)。文件末尾修改为: type: git repo: git@git.dev.tencent.com:<Coding账号名称>/<Coding账号名称>.git branch: master按照之前的GitHub添加一样,在这里把coding的也添加上去,直接加到后面即可! 4.4.然后推送到你的Coding仓库,没错,又是这两条指令: $ hexo g $ hexo d
  4. 进入刚才创建的Coding项目,进入代码页面,你会看到有一项叫Pages服务,然后点击“一键开启静态Pages”。稍等片刻,美味就快好。。。不对,稍等片刻CodingPages即可部署成功!
  5. 域名解析 5.1.解析类型选择为CNAME; 5.2.主机记录,就是你的域名前缀,填写www即可; 5.3.记录值去复制你的<Coding账号名称>.coding.me填上去; 5.4.线路解析,就默认的就行了。
  6. 在你刚才开启Pages服务的地方,点击设置,进入它的设置页绑定你的自定义域名。
  7. 最后,到这里基本上就大功告成啦!~ o( ̄▽ ̄)o
配置解析注意事项

嗯,为什么要在两个托管平台都搭建起来呢?原因很简单:要实现国内外访问不同的服务,所以要分别托管并且分别设置解析。无论是腾讯云还是阿里云,他们的解析服务都能够很好地区分国内外的节点。我们需要将国内的CNAME设置到pages.coding.me,将国外的CNAME设置到pages.github.io,然后,魔法就出现了!

Hexo命令行常用指令

代码语言:javascript
复制
hexo help #查看帮助
hexo init #初始化一个目录
hexo new "postName" #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成网页,可以在 public 目录查看整个网站的文件
hexo server #本地预览,'Ctrl+C'关闭
hexo deploy #部署.deploy目录
hexo clean #清除缓存,**你可以选择每次执行命令前先清理缓存,每次部署前先删除 .deploy 文件夹**

简写:

代码语言:javascript
复制
hexo n == hexo new
hexo g == hexo generate
hexo s == hexo server
hexo d == hexo deploy

部署成功时会返回这个:

代码语言:javascript
复制
[info] Deploy done: git

最后

记得平时多做好备份,这是个好习惯。万一出现文件误删,丢失等,甚至GitHub你在某一天无法访问。

我的博客的评论系统是Valine我觉得还可以吧,其它的如:来比利、哦不是来必力、畅言等都是不错的。由于我只用了一个,优缺点就不说了,但是感觉Valine的UI更符合我的胃口。

博客右下角的被大家称为萌萌哒,也就是二次元看板娘,是使用live-2d实现的。

如果你的Hexo搭建成功,不妨跟大家分享以下你的快乐呢!


*版权声明:版权归作者本人所有,尊重原创,推送文章除非无法确认,都会注明作者和来源。如果出处有误或侵犯到原作者权益,实属无心之举,请务必与我联系删除或授权事宜。本公众号所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处!

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-03-12,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 爪哇派生 微信公众号,前往查看

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

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 博客搭建
    • 适合哪些人呢?
      • 准备工作
        • 安装环境
        • 安装Hexo
        • 初始化Hexo
        • 本地查看
        • 注意事项详解
      • 网站搭建实施方案
        • GithubPages
        • GithubPages + 域名
        • GithubPages + CodingPages + 域名
        • 配置解析注意事项
      • Hexo命令行常用指令
      • 最后
      相关产品与服务
      访问管理
      访问管理(Cloud Access Management,CAM)可以帮助您安全、便捷地管理对腾讯云服务和资源的访问。您可以使用CAM创建子用户、用户组和角色,并通过策略控制其访问范围。CAM支持用户和角色SSO能力,您可以根据具体管理场景针对性设置企业内用户和腾讯云的互通能力。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档