5分钟教你搭建个人博客,纯白嫖,花了一分钱你来打我

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

5分钟教你搭建个人博客,纯白嫖,花了一分钱你来打我

封面

5分钟教你搭建个人博客,纯白嫖,花了一分钱你来打我

内容页

经验之谈:就个人博客来讲,笔者已经折腾过很多了,用过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:}

使用docsify命令生成文档站点安装docsify-cli 工具推荐安装 docsify-cli 工具,可以方便创建及本地预览文档网站。

npm i docsify-cli -g因为我们已经安装了node环境,所以直接打开CMD窗口执行上面的命令就好了。

初始化一个项目docsify init ./docsindex.html 入口文件README.md 会做为主页内容渲染.nojekyll 用于阻止 GitHub Pages 会忽略掉下划线开头的文件启动项目,预览效果到这里,就可以启动项目,然后看下效果了。 使用下面命令启动项目:

docsify serve docs流程器输入:}

1、配置左侧导航栏

不建议配置,配置了就不能显示当前文章的目录

在 \\docs目录下新建一个_sidebar.md 的md文件,内容如下:

– 我的博客  – [第一章节](blog/博客搭建.md)在index.html文件中配置一下。在内嵌的js脚本中加上下面这句:

loadSidebar: true2、配置个封面

套路和上面配置左侧导航栏是一样的。

首先新建一个 _coverpage.md 的md文件,这里面的内容就是你封面的内容。

# Myblogs> 我的博客[CSDN](}

coverpage: true3、配置首页

其实就是 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 }

使用Github Pages在myblogs仓库下,选中 Settings 选项,找到GitHub Pages 页签,在Source下面选择master branch / docs folder 选项。即可完成

最后欢迎来参观一下我的博客:}

未经允许不得转载:搜热门主机 » 5分钟教你搭建个人博客,纯白嫖,花了一分钱你来打我

赞 (0)

Warning: count(): Parameter must be an array or an object that implements Countable in /www/wwwroot/srmzj.com/wp-includes/class-wp-comment-query.php on line 405