基于Github Pages + docsify,我花了一小时搭建好了个人博客还顺手还写了这篇文章 效果:
- 封面
文章插图
- 内容页
文章插图
经验之谈:就个人博客来讲,笔者已经折腾过很多了,用过WordPress、Typecho、Hexo等等,主机也用过基于免费的GitPages或者付费的VPS,最后都不了了之,原因要么是VPS到期了懒得续费 , 要么是数据迁移各种费心 , 博客要么是基于动态的比如WordPress需要数据库,要么是基于静态的比如Hexo,一迁移你将要面对的是一堆数据库的数据或者是HTML代码 , 移植都太麻烦 。最后我挖掘了我两个核心需求:免费,易移植,那么Github Pages + docsify完全满足了我的需求
- 免费:Github Pages本来就是免费的
- 易移植:docsify是基于js将md文档转换成html,计算在客户端 , 不在服务器端,服务器只用存md,这个就很舒服了,以后你的博客数据不会是一堆数据库数据或者html代码,而是具有可读性的md文档 , 下面详细介绍一下
准备工作 1、git环境,github账号 windows下安装git可以看下这篇Git简易教程之git简介及安装
因为我们要使用Github Pages来部署我们的应用,请先注册下github的账号 , 官网:Github
2、有node环境 Windows下安装node环境
简单而言
- 去官网下载nodejs:https://nodejs.org/en/,安装好
- npm设置代理或镜像 , 不然因为周所周知的原因会慢到你可能无法想象设置代理,按照实际情况来# http代理
npm config set proxy=http://127.0.0.1:8087
npm config set registry=http://registry.npmjs.org
# https代理
npm config set https-proxy http://server:port
# 设置用户名或密码,没有就不管
npm config set proxy http://username:password@server:port
npm confit set https-proxy http://username:password@server:port
# 取消代理
npm config delete proxy
npm config delete https-proxy设置镜像(推荐),如果没有代理,可以设置个国内镜像# 设置淘宝镜像
npm config set registry https://registry.npm.taobao.org
# 验证成功没
npm config get registry
- 使用docsify命令生成文档站点
- 在github上部署站点
使用docsify命令生成文档站点 安装docsify-cli 工具 推荐安装 docsify-cli 工具,可以方便创建及本地预览文档网站 。
npm i docsify-cli -g 因为我们已经安装了node环境 , 所以直接打开CMD窗口执行上面的命令就好了 。
初始化一个项目docsify init ./docs
- index.html 入口文件
- README.md 会做为主页内容渲染
- .nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件
docsify serve docs 流程器输入:http://localhost:3000
1、配置左侧导航栏
不建议配置,配置了就不能显示当前文章的目录
在 \docs目录下新建一个_sidebar.md 的md文件,内容如下:
- 我的博客 - [第一章节](blog/博客搭建.md) 在index.html文件中配置一下 。在内嵌的js脚本中加上下面这句:
loadSidebar: true 2、配置个封面
套路和上面配置左侧导航栏是一样的 。
首先新建一个 _coverpage.md 的md文件,这里面的内容就是你封面的内容 。
# Myblogs> 我的博客[CSDN](https://blog.csdn.net/xxx)[滚动鼠标](#introduction) 然后在index.xml文件中修改js脚本配置,添加一句:
coverpage: true 3、配置首页
其实就是 docs目录下README.md` 文件的内容 。
我们一直没有管他,默认就是这个样子的:
改一下,放上自己牛逼的经历或者是标签 。
# 个人简介 部署到Github上 登录github账号,建仓库 创建本地仓库,推送到github 右键Git Bash Here 打开git命令行初始化一个仓库,并提交所有的博客文件到git本地仓库 。
涉及命令如下:
git init // 初始化一个仓库git add -A // 添加所有文件到暂存区,也就是交给由git管理着git commit -m "myblogs first commit" // 提交到git仓库,-m后面是注释git remote add origin https://github.com/xxx/myblogs.gitgit push -u origin master // 推送到远程myblogs仓库 按上面的命令顺序操作 , 不出意外的话,我们的本地myblogs已经同步到了github上面了 。
使用Github Pages 在myblogs仓库下,选中 Settings 选项,找到GitHub Pages 页签,在Source下面选择master branch / docs folder 选项 。即可完成
【三分钟教你免费搭建个人博客 如何创建自己的个人博客】 最后欢迎来参观一下我的博客:https://scriptwang.github.io/blog/#/