基于Github Pages + docsify 。我花了一小时搭建好了个人博客还顺手还写了这篇文章
效果:
封面

文章插图
内容页

文章插图
经验之谈:就个人博客来讲 。笔者已经折腾过很多了 。用过WordPress、Typecho、Hexo等等 。主机也用过基于免费的GitPages或者付费的Vps 。最后都不了了之 。原因要么是VPS到期了懒得续费 。要么是数据迁移各种费心 。博客要么是基于动态的比如WordPress需要数据库 。要么是基于静态的比如Hexo 。一迁移你将要面对的是一堆数据库的数据或者是html代码 。移植都太麻烦 。最后我挖掘了我两个核心需求:免费 。易移植 。那么Github Pages + docsify完全满足了我的需求
免费:Github Pages本来就是免费的
易移植:docsify是基于js将md文档转换成html 。计算在客户端 。不在服务器端 。服务器只用存md 。这个就很舒服了 。以后你的博客数据不会是一堆数据库数据或者html代码 。而是具有可读性的md文档 。下面详细介绍一下
docsify和一般的使用Hexo、Jekyll、Hugo等博客框不同的是 。支持Markdown格式 。对程序员的博主们是很友好的 。不用生成html文件 。写完MD格式的博客直接往上一放 。框架自己在运行时解析渲染成html页面 。
准备工作
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:8087npm config set registry=http://registry.npmjs.org# https代理npm config set https-proxy http://server:port# 设置用户名或密码 。没有就不管npm config set proxy http://username:password@server:portnpm confit set https-proxy http://username:password@server:port# 取消代理npm config delete proxynpm config delete https-proxy设置镜像(推荐) 。如果没有代理 。可以设置个国内镜像# 设置淘宝镜像npm config set registry https://registry.npm.taobao.org# 验证成功没npm config get registry
3、简要说明一下步骤
使用docsify命令生成文档站点
在github上部署站点
docsify官网
地址:https://docsify.js.org/#/ docsify官网
使用docsify命令生成文档站点
安装docsify-cli 工具
推荐安装 docsify-cli 工具 。可以方便创建及本地预览文档网站 。
npmidocsify-cli-g【个人免费博客注册申请 5分钟教你搭建个人博客】因为我们已经安装了node环境 。所以直接打开CMD窗口执行上面的命令就好了 。
初始化一个项目
docsifyinit./docsindex.html 入口文件
README.md 会做为主页内容渲染
.nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件
启动项目 。预览效果
到这里 。就可以启动项目 。然后看下效果了 。使用下面命令启动项目:
docsifyservedocs流程器输入:http://localhost:3000
1、配置左侧导航栏
不建议配置 。配置了就不能显示当前文章的目录
在\docs目录下新建一个_sidebar.md的md文件 。内容如下:
-我的博客-[第一章节](blog/博客搭建.md)在index.html文件中配置一下 。在内嵌的js脚本中加上下面这句:
loadSidebar:true2、配置个封面
套路和上面配置左侧导航栏是一样的 。
首先新建一个_coverpage.md的md文件 。这里面的内容就是你封面的内容 。
#Myblogs>我的博客[CSDN](https://blog.csdn.net/xxx)[滚动鼠标](#introduction)然后在index.xml文件中修改js脚本配置 。添加一句:
coverpage:true3、配置首页
其实就是 docs目录下README.md` 文件的内容 。
我们一直没有管他 。默认就是这个样子的:
改一下 。放上自己牛逼的经历或者是标签 。
#个人简介部署到Github上
登录github账号 。建仓库
创建本地仓库 。推送到github
右键Git Bash Here打开git命令行初始化一个仓库 。并提交所有的博客文件到git本地仓库 。
涉及命令如下:
gitinit//初始化一个仓库gitadd-A//添加所有文件到暂存区 。也就是交给由git管理着gitcommit-m"myblogsfirstcommit"//提交到git仓库 。-m后面是注释gitremoteaddoriginhttps://github.com/xxx/myblogs.gitgitpush-uoriginmaster//推送到远程myblogs仓库
推荐阅读
- 郭德纲大弟子刚声明退出德云社,曹云金就宣布招演员,你怎么看?
- 巾帼不让须眉,世界各国女兵的气质到底如何呢?
- 曹云金,刘云天,何云伟他们为什么要离开德云社呢?
- 京东一个身份证实名3个会不会有风险 京东无限实名技术分享
- 都说乌克兰美女“遍地都是”,男人的天堂,现实真是这样吗?
- 同样一起离开德云社,曹云金还带着云字,何云伟为何早已改为何伟?
- 比格犬为什么被禁养 为什么很少人养比格犬
- 闫云达退出德云社,有什么内在的原因?
- 烧仙草里面的仙草是龟苓膏吗 黑凉粉龟苓膏烧仙草的区别