无服务器使用Hexo搭建个人网站<span>(上)</span>

无服务器使用Hexo搭建个人网站(上)

043936

有不少朋友想搭建一个自己的博客网站, 对一个初学者来说,当然希望能简单的就搞定所有。

而且大部分想分享自己的知识,写作的朋友来说都是没有技术背景或是或是没时间折腾,想建立静态网站,又却步于不知道该用什么工具。

不想为了服务器问题整天折腾,那么可以选择使用 Github Page 这类静态托管服务

Hexo 介绍

Hexo 一个快速、简洁且高效的博客框架。Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页

官网:Hexo.io

  • 超快速度
  • 一键部署
  • 支持 Markdown
  • 插件和可扩展性

环境安装

因为 Hexo 是基于 Node.js 需要在电脑安装 Node.js环境

更新推送文章使用 Git 来手动上传, 需要安装 Git

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,可以在非浏览器环境下,解释运行 JS 代码

Git 是一个开源的分布式版本控制系统,可以有效、高速地处理从很小到非常大的项目版本管理

Node JS 官网:nodejs.org

第一步:打开官网,下载 Windows 安装包

图片[1]-无需服务器 Hexo 搭建个人网站

第二步:打开下载的安装包,一直点 next 下一步安装(注:不建议安装在 C 盘,可自行选择位置)

安装完成!

Git 官网下载速度奇慢无比,我建议使用镜像站下载

第一步:打开镜像站,鼠标滑到底部选择最新版下载

图片[2]-无需服务器 Hexo 搭建个人网站
图片[3]-无需服务器 Hexo 搭建个人网站

第二步:打开下载的安装包,一直点 next 下一步安装(注:不建议安装在 C 盘,可自行选择位置)

安装完成!

更多类似镜像网站

Hexo 安装

到这里环境搭建完成,我们开始进入正题。打开 Git Bash 控制台,输入 ?

npm install hexo-cli -g
npm install hexo-server -g

这一步安装完成后可以在 C:\Users\用户名\AppData\Roaming\npm\node_modules 看到建立了两个文件夹

然后继续初始化并启动 Hexo 项目

hexo init blog   # 初始化
cd blog          # 进入目录
npm install      # 安装组件
hexo g           # 生成页面
hexo s           # 启动预览

浏览器访问 http://localhost:4000,出现 Hexo 默认页,本地安装成功!然后 Ctrl+C 结束进程,我们进行下一步操作

静态托管 / Github 设置

静态网站托管服务有很多,这里我用 Github 来演示。

一、Github 创建

注册登录 Github 后,新建一个仓库,仓库名称填 xxx.github.io,然后创建

图片[6]-无需服务器 Hexo 搭建个人网站

二、与 Github 关联

Blog 文件位置:C:\Users\系统用户名\blog
在 Blog 文件内修改叫 _config.yml 的文件,在其末尾的 Deployment 部分,改成下面这样 ? ?

deploy:
  type: git
  repository: git@github.com:用户名/用户名.github.io.git
  branch: master

我的示例 ?

# 这块是举例,可别复制这里的
deploy:
  type: git
  repository: git@github.com:Iuleoo/Iuleoo.github.io.git
  branch: master

三、安装 hexo-deployer-git

现在配置文件设置好了,这时需要先安装 deploy-git ,这是部署的命令,这样才能用命令部署到 GitHub

npm install hexo-deployer-git --save

四、文章推送

以后每次推送更新文章依次执行下列命令即可 ?

cd blog      # 进入目录
hexo clean   # 清除缓存文件等
hexo g       # 生成页面
hexo d       # 部署

输入上面 ? 命令,得到下图就说明部署成功了

图片[7]-无需服务器 Hexo 搭建个人网站

完成!过一会儿再访问我们的 GitHub 域名 https://用户名.github.io 就可以看到你的博客了

新建文章

接下来如果我们要发一篇新的博客内容,在命令行中输入

hexo n "博客标题名"
图片[8]-无需服务器 Hexo 搭建个人网站

接着在 blog/source/_posts 目录下就会有创建好的以文章标题名命名的 Markdown 文件

图片[9]-无需服务器 Hexo 搭建个人网站

也可以不使用命令自己创建 .md 文件,只需在文件开头手动加入如下格式 Front-matter 即可

---
title: Hello World # 标题
date: 2019/3/26 hh:mm:ss # 时间
categories: # 分类
- Diary
tags: # 标签
- PS3
- Games
---

摘要
<!--more-->
正文

使用 Markdown 编辑器打开,就可以开始你的创作之旅了

使用个人域名(可选)

通过 用户名.github.io 的方式 如果觉得这个网址不够上档次,这就需要你设置个人域名了,这需要花钱

我们可以到 各云服务商处注册域名,这里腾讯云举例

新用户可以用这个有优惠:https://cloud.tencent.com/act/domainsales(非AFF)

.com 域名首年 23 元 (续费 59 元)
.cn 域名 首年 9.9 元(续费 35 元)

当然了,域名注册商有很多

国内: 腾讯云 、 阿里云 、 西部数码 、趣域 等
海外:Godaddy、Namesilo、Namecheap 等

  • 主机记录分别未:www 和 @
  • 记录类型:选择 CNAME
  • 记录值:用户名.github.io
图片[10]-无需服务器 Hexo 搭建个人网站

在本地 /source 目录下手动建立一个 CNAME 空文件(无后缀),把域名填进去并保存

图片[11]-无需服务器 Hexo 搭建个人网站
图片[12]-无需服务器 Hexo 搭建个人网站

在 Github 的博客项目中,依次点击 Settings -> Pages,然后在 Custom domain 添加你的域名,最后 Save 即可

清除缓存等文件并重新发布网站

常见问题

hexo new "name"       # 新建文章
hexo new page "name"  # 新建页面
hexo g                # 生成页面
hexo d                # 部署
hexo g -d             # 生成页面并部署
hexo s                # 本地预览
hexo clean            # 清除缓存和已生成的静态文件
hexo help             # 帮助

网站名称、描述、作者、链接样式等,全部在网站目录下的 _config.yml 文件中,参考官方文档按需要编辑
注意:冒号后要加一个空格!

Hexo 设置显示文章摘要,首页不显示全文
Hexo 主页文章列表默认会显示文章全文,浏览时很不方便,可以在文章中插入 <!--more--> 进行分段
该代码前面的内容会作为摘要显示,而后面的内容会替换为 “Read More” 隐藏起来

设置网站图标
进入 themes/主题 文件夹,打开 _config.yml 配置文件,找到 favicon 修改,一般格式为:favicon: 图标地址(不同主题可能略有差别)

修改并部署后没有效果
使用 hexo clean 清理后重新部署

开启 HTTPS 后访问网站显示连接不安全?
证书还未部署生效,等待一会儿,清除浏览器缓存再试

在 Themes | Hexo 选择一个喜欢的主题,比如 NexT,进入网站目录打开 Git Bash Here 下载主题

git clone https://github.com/iissnan/hexo-theme-next themes/next

然后修改 _config.yml 中的 theme 为新主题名称 next,发布(有的主题需要将 _config.yml 替换为主题自带的,参考主题说明)

最后

Hexo 是一种纯静态的博客,我们必须要在本地完成文章的编辑再部署到 GitHub 上,依赖于本地环境

可以说是一种比较极客的写博客方式,,比较适合爱折腾研究的用户,或者没有在线发文需求的朋友

虽然搭建时比较麻烦,有点折腾,但是优势也是明显的——免费稳定省心,甚至放了几年都忘记了,来看文章依然在

如果本文有何疏漏可下方留言或者与我联系指出,我会在看到的第一时间回复

© 版权声明
THE END
喜欢就支持以下吧
点赞36
分享
评论 抢沙发

请登录后发表评论