阅读本篇前,请先配置好相应的环境,请仔细阅读教程 基于 Hexo 从零开始搭建个人博客(一)

原文链接:基于 Hexo 从零开始搭建个人博客(二)

前言

  1. 博客搭建过程遇到任何问题,优先在本页面搜索,检查是否已经有该配置教程。
  2. 遇到问题可以优先在文章评论区留言,注意留言时请填写正确的邮箱以确保能收到站长的回复。
  3. 实在解决不了的问题可添加站长 Wechat ,添加好友时请备注自己的姓名+专业,如 张三 计算机科学与技术。

初始化 Hexo 项目

  1. 在目标路径(我这里选的路径为【G:/hexo-blog】)打开cmd命令窗口,执行hexo init初始化项目。
hexo init blog-demo(项目名)



2. 进入blog-demo ,输入npm i安装相关依赖。

cd blog-demo  //进入blog-demo文件夹
npm i



3. 初始化项目后,blog-demo有如下结构:

【node_modules】:依赖包

【scaffolds】:生成文章的一些模板

【source】:用来存放你的文章

【themes】:主题

【.npmignore】:发布时忽略的文件(可忽略)

【_config.landscape.yml】:主题的配置文件

【_config.yml】:博客的配置文件

【package.json】:项目名称、描述、版本、运行和开发等信息



4. 输入hexo server或者hexo s



5. 打开浏览器,输入地址:http://localhost:4000/ ,看到下面的效果,说明你的博客已经构建成功了。

将静态博客挂载到 GitHub Pages

上一篇文章中,我们已经完成了对 GitHub 账户的注册以及 Github Pages 的创建,并且为 GitHub 配置了 SSH key, 我们将博客部署到 GitHub Pages 上即可。

安装 hexo-deployer-git

npm install hexo-deployer-git --save

修改 _config.yml 文件

blog-demo目录下的_config.yml,就是整个Hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的配置描述

修改最后一行的配置,将repository修改为你自己的github项目地址即可。

deploy:
type: git
repository: git@github.com:tzy13755126023/tzy13755126023.github.io.git
branch: master

部署项目到 GitHub

修改好配置后,运行如下命令,将代码部署到 GitHub。

hexo clean
hexo generate
hexo deploy
  • hexo clean:删除之前生成的文件,若未生成过静态文件,可忽略此命令。
  • hexo generate:生成静态文章,可以用hexo g缩写
  • hexo deploy:部署文章,可以用hexo d缩写

注意:deploy时可能要你输入 username 和 password。

如果出现Deploy done,则说明部署成功了。



打开浏览器访问:https://tzy13755126023.github.io ,这时候我们就可以看到博客内容了。

设置个人域名

现在你的个人网站的地址是 yourname.github.io。如果觉得不够定制化,可以购买一个专属域名。

这一步不是必要的,如果目前还不想买域名可以先跳过。

腾讯云、阿里云等都是不错的选择,博主选择的阿里云的.com。购买域名后,实名认证进入阿里云控制台,点云解析进去,找到你刚买的域名,点进去添加两条解析记录,记录值 请填写<用户名>.github.io,如下图所示:



以我的域名tzy1997.com为例,进行如下说明:

主机记录 解释
www 解析后的域名为 www.tzy1997.com
@ 直接解析主域名 yafine-blog.cn
* 泛解析,匹配其他所有域名 *.yafine-blog.cn
mail 将域名解析为 mail.yafine-blog.cn,通常用于解析邮箱服务器
二级域名 如 abc.yafine-blog.cn,填写 abc
手机网站 如 m.yafine-blog.cn,填写 m
显性URL 不支持泛解析(泛解析:将所有子域名解析到同一地址)

将域名指向云服务器,请选择「A」; 将域名指向另一个域名,请选择「CNAME」; 建立邮箱请选择「MX」,根据邮箱服务商提供的 MX 记录填写。

记录类型 解释
A 用来指定域名的 IPv4 地址(如 8.8.8.8),如果需要将域名指向一个 IP 地址,就需要添加 A 记录。
CNAME 如果需要将域名指向另一个域名,再由另一个域名提供 IP 地址,就需要添加 CNAME 记录。
MX 如果需要设置邮箱,让邮箱能收到邮件,就需要添加 MX 记录。
TXT 在这里可以填写任何东西,长度限制 255。绝大多数的 TXT 记录是用来做 SPF 记录(反垃圾邮件)
NS 域名服务器记录,如果需要将子域名交给其他 DNS 服务商解析,就需要添加 NS 记录。
AAAA 用来指定主机名(或域名)对应的 IPv6 地址(例如:ff06:0:0:0:0:0:0:c3)记录。
SRV 记录了哪台计算机提供了哪个服务。格式为:服务的名字、点、协议的类型,例如:_xmpp-server_tcp。
显性 URL 从一个地址 301 重定向到另一个地址的时候,就需要添加显性 URL 记录(注:DNSPod 目前只支持 301 重定向)。
隐性 URL 类似于显性 URL,区别在于隐性 URL 不会改变地址栏的域名。

这时候你的项目根目录应该会出现一个名为CNAME的文件。如果没有的话,打开博客/source目录,我的是G:/hexo-blog/blog-demo/source,新建CNAME文件,注意没有后缀。然后在里面写上你的域名(例如:tzy1997.com),保存。最后运行hexo ghexo d上传到github。这样到最后当你在地址栏输入xxx.github.io时,才会自动跳转到你的域名。

打开你的github博客项目,点击settings,点击Pages,拉到下面Custom domain处,填上你自己的域名 ,保存。

部署成功后,再打开你的浏览器,输入你自己的专属域名,即可看到你的博客网站!

基于 Hexo 从零开始搭建个人博客(二)的更多相关文章

  1. 基于 Hexo 从零开始搭建个人博客(五)

    阅读本篇前,请先阅读前几篇文章: 基于 Hexo 从零开始搭建个人博客(一) 基于 Hexo 从零开始搭建个人博客(二) 基于 Hexo 从零开始搭建个人博客(三) 基于 Hexo 从零开始搭建个人博 ...

  2. Mac上基于hexo+GitHub搭建个人博客(一)

    原文地址: http://fanjiajia.cn/2018/11/23/Mac%E4%B8%8A%E5%9F%BA%E4%BA%8Ehexo+GitHub%E6%90%AD%E5%BB%BA%E4% ...

  3. 2019基于Hexo快速搭建个人博客,打造一个炫酷博客(1)-奥怪的小栈

    本文转载于:奥怪的小栈 这篇文章告诉你如何在2019快速上手搭建一个像我一样的博客:基于HEXO+Github搭建.并完成SEO优化,打造一个炫酷博客. 本站基于HEXO+Github搭建.所以你需要 ...

  4. 【教程向】——基于hexo+github搭建私人博客

    前言 1.github pages服务生成的全是静态文件,访问速度快: 2.免费方便,不用花一分钱就可以搭建一个自由的个人博客,不需要服务器不需要后台: 3.可以随意绑定自己的域名,不仔细看的话根本看 ...

  5. 《Hexo+github搭建个人博客》

    <Hexo+github搭建个人博客> 文/冯皓林 完稿:2016.4.22-2016.4.23 注意:本节教程只针对Windows用户.本教程由无人赞助,赞助写出. <Hexo+g ...

  6. 使用Node.js+Hexo+Github搭建个人博客(续)

    一.写在前面 在我的上一篇博客<使用Nodejs+Hexo+Github搭建个人博客>中,已经介绍了如何使用 Hexo 在 Github Pages 上搭建一个简单的个人博客.该篇博文将在 ...

  7. Hexo&Github-Pages搭建个人博客

    some基础知识 hexo hexo是一款基于Node.js的静态博客框架 github-pages说明 github有两种主页,一种是github-page(个人主页),一种是项目主页,本教程针对个 ...

  8. 如何用hexo+github搭建个人博客

    搭建环境 1.安装 Node.js: https://nodejs.org/en/ windows下点击链接,下载安装即可;Linux下更加简单,在终端下输入sudo apt-get install ...

  9. Ubuntu+Hexo+Github搭建个人博客

    Ubuntu+Hexo+Github搭建个人博客 目录 目录 目录 1. 简介 环境 2. Git安装及配置 2.1 安装Git 2.2 创建Git仓库 2.3 配置git仓库 2.4 添加公钥 3. ...

随机推荐

  1. 【导包】使用Sklearn构建Logistic回归分类器

    官方英文文档地址:http://scikit-learn.org/dev/modules/generated/sklearn.linear_model.LogisticRegression.html# ...

  2. ucore lab2 物理内存管理 学习笔记

    总的来讲把的LAB1代码逻辑理顺后再往后学就轻松了一大截.LAB2过遍课程视频,再多翻翻实验指导书基本上就没遇到啥大坎儿.对这节学得东西做个总结就是一张图: 练习0:填写已有实验 本实验依赖实验1.请 ...

  3. mysql5.6 innodb_large_prefix引起的一个异常

    phenomenon: Specified key was too long; max key length is 3072 bytes 在修改一个数据库字段时,字段容量被限制为了表前缀的大小而不是本 ...

  4. C++进阶实例2--员工分组

    C++进阶实例2--员工分组 1 #include<iostream> 2 #include<map> 3 #include<vector> 4 #include& ...

  5. 在vue-cli中安装scss,且可以全局引入scss的步骤

    简历魔板__个人简历模板在线生成 在写vue的css样式时,觉得需要css预处理器让自己的css更加简洁.适应性更强.可读性更佳,更易于代码的维护,于是在vue-cli脚手架采用scss.写过的人都知 ...

  6. Debouncer防抖代码

    Debouncer类 import java.util.concurrent.*; public class Debouncer { private final ScheduledExecutorSe ...

  7. c++:-7

    上一节主要学习C++中的函数模版.数据结构以及排序查找操作:c++:-6,本节学习C++的范型程序设计和STL: 范型程序设计 编写不依赖于具体数据类型的程序 将算法从特定的数据结构中抽象出来,成为通 ...

  8. 【java并发编程】ReentrantLock 可重入读写锁

    目录 一.ReentrantLock可重入锁 二.ReentrantReadWriteLock读写锁 三.读锁之间不互斥 欢迎关注我的博客,更多精品知识合集 一.ReentrantLock可重入锁 可 ...

  9. Chrome 中的自动播放政策

    官方策略说明 Autoplay policy in Chrome 修改本机浏览器设置 修改 chrome 设置允许自动播放声音 electron 允许自动播放声音 issues/13525 具体就是这 ...

  10. Redis概述及基本数据结构

    SQL vs NoSQL 结构化 SQL 是结构化的,一旦定义了表结构,以后在维护数据的时候必须严格遵守定义的结构. NoSQL 是非结构化的,常见的形式有 Redis 的 Key-Value 存储形 ...