专栏首页测试开发专栏教你如何快速打造个人专属博客(轻量、简易、高逼格)

教你如何快速打造个人专属博客(轻量、简易、高逼格)

阅读全文大概需要6分钟

1. 前言

通常,一个技术点我们会使用,并不难,但是要做到让别人也能听懂我们讲得,还是需要一定的技巧和经验的。因此很多搞技术的工程师都喜欢写博客,一方面是给自己做笔记,另一方面也是在提升自己的写作、总结能力。类似于CSDN、博客园也都可以写文章,但这些都是依赖在别人提供好的网站或博客模板上来写,能定制属性较少,今天给大家推荐一种搭建个人技术博客的方法:基于hexo+github实现,通过它能快速搭建出一套属于个人且具有极高定制化特性的技术博客,下面介绍详细的搭建过程。

2. 开始前准备工作

在开始之前,需要做一些准备工作:

  • 申请一个GitHub账号,没有的话去注册一个,它主要是用来做博客的远程创建、与本地的hexo建立关联。
  • 安装Node.js、Npm,并了解相关基础知识,用Node主要来生成静态页面。
  • 安装Git (或者其它git客户端),把本地的hexo内容提交到GitHub上去。

3. 新建GitHub仓库

新建一个名为你的用户名.github.io的仓库,比如说,如果你的github用户名是test,那么你就新建test.github.io的仓库(必须是你的用户名,其它名称无效),将来你的网站访问地址就是 http://test.github.io 了,是不是很方便?

需要注意的是,仓库名字必须是:username.github.io,其中username是你的用户名,且每一个github账户最多只能创建一个这样可以直接使用域名访问的仓库。

4. 配置SSH Key

为什么要配置这个呢?因为你提交代码肯定要拥有你的github权限才可以,但是直接使用用户名和密码太不安全了,所以我们使用ssh key来解决本地和服务器的连接问题。

$ cd ~/. ssh #检查本机已存在的ssh密钥

如果提示:No such file or directory 说明你是第一次使用git。

ssh-keygen -t rsa -C "邮件地址"

最终会生成一个文件在用户目录下,打开用户目录,找到.ssh\id_rsa.pub文件,打开并复制里面的内容,打开你的GitHub主页,进入个人设置 -> SSH and GPG keys -> New SSH key。

4.1. 测试是否成功

$ ssh -T git@github.com # 注意邮箱地址不用改

如果提示Are you sure you want to continue connecting (yes/no)?,输入yes,然后会看到:Hi zhoujinjian! You've successfully authenticated, but GitHub does not provide shell access.

看到这个信息说明SSH已配置成功!

此时你还需要配置:

$ git config --global user.name "liuxianan"// 你的github用户名,非昵称
$ git config --global user.email  "xxx@qq.com"// 填写你的github注册邮箱

5. 安装、使用hexo

5.1. hexo简介

Hexo是一个简单、快速、强大的基于 Github Pages 的博客发布工具,支持Markdown格式,有众多优秀插件和主题,官网:http://hexo.io。

5.2. hexo原理

由于github pages存放的都是静态文件,博客存放的不只是文章内容,还有文章列表、分类、标签、翻页等动态内容,假如每次写完一篇文章都要手动更新博文目录和相关链接信息,相信谁都会疯掉,所以hexo所做的就是将这些md文件都放在本地,每次写完文章后调用写好的命令来批量完成相关页面的生成,然后再将有改动的页面提交到github。

5.3. hexo安装

Node和Git都安装好后,可执行如下命令安装hexo:

$ sudo npm install -g hexo

5.4. hexo目录初始化

创建一个文件夹,如:Blog,cd到Blog里执行hexo init的,命令:

hexo init

好啦,至此,全部安装工作已经完成!

5.5. hexo生成静态页面

继续再Blog目录下执行如下命令,生成静态页面

hexo generate (hexo g  也可以)

5.6 本地启动

启动本地服务,进行文章预览调试,命令:

hexo server  (hexo s也可以)

开启本地预览服务,打开浏览器访问 http://localhost:4000 即可看到博客内容。

6. 使用hexo写博客

6.1 hexo与GitHub仓库关联配置

建立与你用户名对应的仓库,仓库名必须为【your_user_name.github.io】,固定写法 然后建立关联,例如我的Blog在本地/Users/mikezhou/Blog,Blog是我之前建的东西也全在这里面,有:

.
├── _config.yml
├── db.json
├── node_modules
├── package-lock.json
├── package.json
├── public
├── scaffolds
├── source
└── themes

5 directories, 4 files

现在我们需要_config.yml文件,来建立关联,命令:

vim _config.yml

翻到最下面,改成我这样子的,注意:: 后面要有空格

deploy:
  type: git
  repository: https://github.com/你的用户名/你的用户名.github.io.git
  branch: master

6.2 hexo写博客

hext与github关联配置好之后,定位到hexo博客的根目录,执行命令:

hexo new 'my-first-blog'

hexo会帮我们在_posts下生成相关md文件,我们只需要打开这个文件按markdown语法就可以开始写博客了。当然你也可以直接自己新建md文件,用这个命令的好处是帮我们自动生成了时间。

一般md博客文章,完整格式如下:

---
title: postName #文章页面上的显示名称,一般是中文
date: 2019-10-17 15:30:16 #文章生成时间,一般不改,当然也可以任意修改
categories: 默认分类 #分类
tags: [tag1,tag2,tag3] #文章标签,可空,多标签请用格式,注意:后面有个空格
description: 附加一段文章摘要,字数最好在140字以内,会出现在meta的description里面
---
以下是正文

文章写好之后,执行如下命令才能使用git部署:

npm install hexo-deployer-git --save

执行下述命令进行上传并部署代码到GitHub:

hexo deploy

代码上传好之后,在浏览器中输入https://zhoujinjian.github.io/就行了,我的 github 的账户叫 zhoujinjian ,把这个改成你 github 的账户名就行了。

可根据个人需求,进行一些定制化配置(如主题、样式配置、增加阅读统计功能等),最终本文示例效果如下所示:

详细示例效果可访问:https://zhoujinjian.github.io

7. hexo补充知识

每次部署的步骤,可按以下三步来进行:

hexo clean
hexo generate
hexo deploy

一些常用命令:

hexo new "postName"  #新建文章
hexo new page "pageName" #新建页面
hexo generate #生成静态页面至public目录
hexo server #开启预览访问端口(默认端口4000,'ctrl + c'关闭server)
hexo deploy #将.deploy目录部署到GitHub
hexo help  #查看帮助
hexo version  #查看Hexo的版本

一些常用路径:

文件/文件夹

说明

_config.yml

配置文件

public

生成的静态文件,这个目录最终会发布到服务器

scaffolds

一些通用的markdown模板

source

编写的markdown文件,_drafts草稿文件,_posts发布的文章

themes

博客的模板

我们正常使用,修改最多的是_config.yml文件,不管是博客的基础配置,还是模板,都是修改这个文件。 source是我们日常写文章要用的目录,是我们日常操作的文件夹。如果针对下载的模板修改,那么就需要操作themes了。

本文分享自微信公众号 - 测试开发技术(mikezhou_talk),作者:狂师

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

原始发表时间:2019-10-21

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战

    本篇将基于Python 3.7+Django 3.0结合Vue.js前端框架,为大家介绍如何基于这三者的技术栈来实现一个前端后离的Web开发项目。为了简化,方便...

    互联网技术小站
  • 【干货】Docker Mysql数据库主从同步配置详细

    前两天 MTSC 2018 在北京国际会议中心圆满召开,并取得非常好的反响,虽然临时有事,没去成,但还是非常赞许为此会议付出的朋友和小伙伴们~

    互联网技术小站
  • Django项目如何接入公司LDAP帐号认证

    Django项目开发过程中,为了保证安全性,通常都会接入用户帐号认证权限功能,而标题中LDAP是什么呢?当然这个不是本文介绍的重点,简单来说,LDAP是一种...

    互联网技术小站
  • Mac下体验Hexo与Github Pages搭建

    很久之前就知道Github可以发布自己的博客,因为仅支持静态文件,一直懒于动手自己进行编辑。再了解到还存在 JekyII 和 Hexo 这样的内容生成框架后,终...

    大江小浪
  • hexo+github 搭建个人技术博客

    LinXunFeng
  • Linux下搭建HEXO博客教程

    参考 https://segmentfault.com/a/1190000002632530

    Jean
  • 使用hexo在GitHub上搭建个人博客

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

    没有故事的陈师傅
  • hexo常用命令

    Hexo 约有二十个命令,但普通用户经常使用的只有下列几个: hexo s hexo s是hexo server的缩写,命令效果一致;启动本地服务器,用于预览主...

    xiangzhihong
  • Hexo整合GitHub Pages

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

    happyJared
  • Mac搭建Hexo博客流程记录,排雷完成

    经过一天的辛苦作战,总算基础的东西出来了。踩了太多的坑,综合我踩坑的经过,明白到,选好一篇引导文很重要!有些步骤不要先做了,不然后面你都不知道怎么死的..

    Jingbin

扫码关注云+社区

领取腾讯云代金券

玩转腾讯云 有奖征文活动