专栏首页编程学习基地Hexo+Github 博客搭建之环境搭建篇

Hexo+Github 博客搭建之环境搭建篇

Github 账号的注册

打开 Github 官网首页(https://github.com/),点击右上角的 Sign Up ,然后在出现的页面上填写你的相关信息,进行注册:

验证完成后,点击 Next:Select a plan,会出现如上图的验证界面,同理,只需要将其中的动物调整为正向显示即可。接着会出现下图的界面,选择 Free,下方的两个选项可选可不选,点击 Continue 继续:

这时 Github 会给你发一封邮件,验证一下即可,验证过后才可以创建库。

验证完成后,开始创建库,如下图所示,仓库名创建格式必须为:<用户名>.github.io,Description 为描述仓库,自定义写,填写必要的描述,也可不填。勾选 Initialize this repository with a README 点击 Creat repository 进行创建。

然后就会出现如图所示的界面,即仓库创建成功!

Github Pages 的创建

我们来测试一下,点击 Create new file,出现如下界面,然后命名文件名为 index.html,在填写如图的内容,再点击 Commit new file,即创建成功,然后打开一个新的网页,输入网址 https://<你的用户名>.github.io,即可以看见一个新的网页,其中的内容就是你写的内容。

至此,Github 的注册以及 Github Pages 已经创建完成了。也可以查看情人节限定,利用 Github Pages做一个表白页面。

配置 Git 用户名和邮箱

在桌面点击鼠标右键,点击 Git Bash Here,会出现一个界面如下图所示:

然后分别输入下面的两个命令,并回车:

git config --global user.name "此处填写你注册时的用户名"
git config --global user.email "此处填写你注册时的邮箱"
# 一般只要不报错,可以跳过下面寻找.gitconfig文件

然后找到.gitconfig 文件,文件存放位置在 C:/Users/[username]/.gitconfig(未找到的话,请开启显示隐藏文件的功能),用编辑器打开,看到如下图所示的内容,即配置成功!

本地安装 hexo 静态博客框架以及发布到 Github Pages

首先选择一个磁盘作为你博客文件的存放位置,然后新建一个文件夹,比如名为 blogtest 的文件夹,创建完后,先不要点进去,在此处点击鼠标右键,选择 Git Bash Here,然后依次输入如下命令,:

# hexo框架的安装
npm install -g hexo-cli
# 等上一个命令完成后,在输入下面的命令
hexo init <新建文件夹的名称>  #初始化文件夹
cd <新建文件夹的名称>
npm install  # 安装博客所需要的依赖文件

等待运行完成,此时文件夹中多了许多文件。注意:后续的命令均需要在站点目录下(即文件夹内)使用 Git Bash 运行。此时 Hexo 框架的本地搭建已经完成了。我们来运行一下看看,命令行依次输入以下命令 :

hexo g
hexo s

浏览器中打开 http://localhost:4000 或者 127.0.0.1:4000,可以看到一个网页,说明 Hexo 博客已经成功在本地运行。

本地博客发布到 Github Pages

之前的步骤中,我们已经完成了对 Github 账户的注册以及 Github Pages 的创建,接下来是将本地博客发布至 Github Pages。

首先需要安装发布的插件,在站点目录下执行下面的命令,也就是创建的博客目录下:

npm install hexo-deployer-git --save

紧接着,将本地目录与 GitHub 关联起来,输入下面的命令行:

ssh-keygen -t rsa -C "你的邮箱地址"

输入后一直回车,然后在 C:/Users/[username] 目录下找到名为.ssh 的文件夹, 文件夹内会有两个文件,一个 id_rsa.pub 一个 id_rsa,用文本编辑器打开 id_rsa.pub,复制里面的的内容。然后打开 Github,点击右上角的头像 Settings 选择 SSH and GPG keys

点击 New SSH key 将之前复制的内容粘帖到 Key 的框中。上面的 Title 可以随意,点击 Add SSH key 完成添加。

然后回到 Git 的命令行界面,测试一下是否与 GitHub 连接成功。输入下面的命令行:

ssh -T git@github.com

点击回车,然后会出现一个询问内容,输入 yes,回车,会出现一段内容,Hi <account name>! You've successfully authenticated, but GitHub doesnot provide shell access.。说明连接成功。此处这个应该是你 Github 的用户名。

进入博客站点目录,用文本编辑器打开_config.yml,这个_config.yml 是博客的配置文件,在以后的博客修改,如个性化修改,博客 SEO 优化等都会使用到,修改如下图的几个地方:

title: 你的博客名
subtitle: 博客的副标题,有些主题支持
description: 博客描述
keywords: 博客关键词
author: 作者,在文章中显示
language: 博客语言语种   
timezone: 时区

滑到文件最底部,有一个 deploy,在 deploy 下面添加一个 repo 项 ,一个 branch 项。填入如下代码,并如下图所示:

type: git
repo: git@github.com:Github用户名/github用户名.github.io.git  
#也可使用https地址,如:https://github.com/Github用户名/Github用户名.github.io.git	

最后就是生成页面,并发布至 Github Pages,执行如下命令:

# Hexo会根据配置文件渲染出一套静态页面
hexo g
# 将上一步渲染出的一系列文件上传至至Github Pages
hexo d
# 也可以直接输入此命令,直接完成渲染和上传
hexo g -d
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

上传完成后,在浏览器中打开 https://<用户名>.github.io,查看上传的网页。如果页面变成了之前本地调试时的样子,说明上传以及完成了。没变的话查看一下上传时命令行窗口的信息有没有错误信息,没有的话清除一下浏览器缓存试试。

阅读全文转跳过客~励む博客链接

关键字【hexo+github】

End


作者:过客~励む

本文分享自微信公众号 - 编程学习基地(LearnBase),作者:DeRoy

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-10-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Hexo+Github 博客搭建之环境准备篇

    你了解 Hexo 吗?Hexo 是一个静态博客框架,基于 Node.js,将 Markdown 文章通过渲染引擎,生成一个静态网页,再结合 Git 命令(ssh...

    DeROy
  • 软件安装目录

    最开始是在公众号【软件安装管家】中来安装一系列的软件。后来估计是被人举报了,一直显示 ‘后台系统升级维护中,暂停服务’,最近刚好在网上查到了公众号中软件链接,顺...

    DeROy
  • Hexo+GitHub 个人博客搭建

    你了解 Hexo 吗?Hexo 是一个静态博客框架,基于 Node.js,将Markdown文章通过渲染引擎,生成一个静态网页,再结合 Git 命令(ssh),...

    DeROy
  • 精彩速递 | 腾讯云数据库6月刊

    点击▲关注 腾讯云数据库 ? ?

    腾讯云数据库 TencentDB
  • RabbitMQ 入门系列(四)

    RabbitMQ 入门系列(一)讲了基本概念。RabbitMQ 入门系列(二)讲了简单入门使用。RabbitMQ 入门系列(三)讲了交换器的不同类型。本文将会讲...

    凌虚
  • 如何在Ubuntu里安装Helm

    Helm是什么?在战网上玩过暗黑破坏神2代的程序员们应该还记得,Helm是国度的意思。

    Jerry Wang
  • 水下机器人首次传回福岛核电站水下废墟画面

    据外媒报道,本周三(19日),东京电力公司正式向福岛核电站投放水下机器人“小太阳鱼”,用于调查废墟内结构的损坏情况。在水下,机器人顺利拍摄到了废墟内建筑崩坏的图...

    机器人网
  • 协程实现tcp两个客户端的通讯

    skylark
  • 原创:带你从零看清Node源码createServer和负载均衡整个过程

    作为一名曾经重度使用Node.js作为即时通讯客户端接入层的开发人员,无法避免调试V8,配合开发addon。于是对Node.js源码产生了很大的兴趣~

    theanarkh
  • 谷歌发布会看图的人工智能,让它来评评你的照片拍得好不好

    人工智能,能做什么? 对于一般用户来说,人工智能更多的只是在智能音箱、手机上的“智能助手”中出现。他们最大的用途,也只是为你打打电话、设置日程和管理家中的智能家...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券