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

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

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 的账户名就行了。


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

微信图片_20220523192841.png

详细示例效果可访问: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的版本

一些常用路径:微信图片_20220523192958.png



文件/文件夹 说明
_config.yml 配置文件
public 生成的静态文件,这个目录最终会发布到服务器
scaffolds 一些通用的markdown模板
source 编写的markdown文件,_drafts草稿文件,_posts发布的文章
themes 博客的模板

我们正常使用,修改最多的是_config.yml文件,不管是博客的基础配置,还是模板,都是修改这个文件。

source是我们日常写文章要用的目录,是我们日常操作的文件夹。如果针对下载的模板修改,那么就需要操作themes了。

目录
相关文章
|
6月前
|
存储 缓存 前端开发
No188.精选前端面试题,享受每天的挑战和学习
No188.精选前端面试题,享受每天的挑战和学习
|
6月前
|
存储 缓存 移动开发
No52.精选前端面试题,享受每天的挑战和学习
No52.精选前端面试题,享受每天的挑战和学习
|
6月前
|
JSON 前端开发 JavaScript
No26.精选前端面试题,享受每天的挑战和学习
No26.精选前端面试题,享受每天的挑战和学习
|
6月前
|
存储 前端开发 JavaScript
No32.精选前端面试题,享受每天的挑战和学习
No32.精选前端面试题,享受每天的挑战和学习
|
6月前
|
JavaScript 前端开发 算法
No97.精选前端面试题,享受每天的挑战和学习
No97.精选前端面试题,享受每天的挑战和学习
|
6月前
|
JSON 前端开发 安全
No77.精选前端面试题,享受每天的挑战和学习
No77.精选前端面试题,享受每天的挑战和学习
|
6月前
|
存储 缓存 JavaScript
No69.精选前端面试题,享受每天的挑战和学习
No69.精选前端面试题,享受每天的挑战和学习
|
6月前
|
JavaScript 前端开发 API
No17.精选前端面试题,享受每天的挑战和学习
No17.精选前端面试题,享受每天的挑战和学习
|
6月前
|
存储 监控 前端开发
No24.精选前端面试题,享受每天的挑战和学习
No24.精选前端面试题,享受每天的挑战和学习
|
6月前
|
存储 网络协议 前端开发
No10.精选前端面试题,享受每天的挑战和学习
No10.精选前端面试题,享受每天的挑战和学习