昊净电商网

免费个人博客搭建(如何不花一分钱搭建个人博客)

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

效果:

封面

内容页

经验之谈:就个人博客来讲,笔者已经折腾过很多了,用过wordpress、typecho、hexo等等,主机也用过基于免费的gitpages或者付费的vps,最后都不了了之,原因要么是vps到期了懒得续费,要么是数据迁移各种费心,博客要么是基于动态的比如wordpress需要数据库,要么是基于静态的比如hexo,一迁移你将要面对的是一堆数据库的数据或者是html代码,移植都太麻烦。最后我挖掘了我两个核心需求:免费,易移植,那么githubpages+docsify完全满足了我的需求

免费:githubpages本来就是免费的易移植:docsify是基于js将md文档转换成html,计算在客户端,不在服务器端,服务器只用存md,这个就很舒服了,以后你的博客数据不会是一堆数据库数据或者html代码,而是具有可读性的md文档,下面详细介绍一下

免费个人博客搭建(如何不花一分钱搭建个人博客)

docsify和一般的使用hexo、jekyll、hugo等博客框不同的是,支持markdown格式,对程序员的博主们是很友好的。不用生成html文件,写完md格式的博客直接往上一放,框架自己在运行时解析渲染成html页面。

准备工作1、git环境,github账号

windows下安装git可以看下这篇git简易教程之git简介及安装

因为我们要使用githubpages来部署我们的应用,请先注册下github的账号,官网:github

2、有node环境

windows下安装node环境

简单而言

去官网下载nodejs:https://nodejs.org/en/,安装好npm设置代理或镜像,不然因为周所周知的原因会慢到你可能无法想象设置代理,按照实际情况来#http代理
npmconfigsetproxy=http://127.0.0.1:8087npmconfigsetregistry=http://registry.npmjs.org#https代理npmconfigsethttps-proxyhttp://server:port#设置用户名或密码,没有就不管npmconfigsetproxyhttp://username:password@server:portnpmconfitsethttps-proxyhttp://username:password@server:port#取消代理npmconfigdeleteproxynpmconfigdeletehttps-proxy设置镜像(推荐),如果没有代理,可以设置个国内镜像#设置淘宝镜像
npmconfigsetregistryhttps://registry.npm.taobao.org#验证成功没npmconfiggetregistry3、简要说明一下步骤使用docsify命令生成文档站点在github上部署站点docsify官网

地址:https://docsify.js.org/#/docsify官网

使用docsify命令生成文档站点安装docsify-cli工具

推荐安装docsify-cli工具,可以方便创建及本地预览文档网站。

npmidocsify-cli-g

因为我们已经安装了node环境,所以直接打开cmd窗口执行上面的命令就好了。

初始化一个项目docsifyinit./docsindex.html入口文件readme.md会做为主页内容渲染.nojekyll用于阻止githubpages会忽略掉下划线开头的文件启动项目,预览效果

到这里,就可以启动项目,然后看下效果了。使用下面命令启动项目:

docsifyservedocs

流程器输入: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

右键gitbashhere 打开git命令行初始化一个仓库,并提交所有的博客文件到git本地仓库。

涉及命令如下:

gitinit//初始化一个仓库gitadd-a//添加所有文件到暂存区,也就是交给由git管理着gitcommit-m"myblogsfirstcommit"//提交到git仓库,-m后面是注释gitremoteaddoriginhttps://github.com/xxx/myblogs.gitgitpush-uoriginmaster//推送到远程myblogs仓库

按上面的命令顺序操作,不出意外的话,我们的本地myblogs已经同步到了github上面了。

使用githubpages

在myblogs仓库下,选中 settings 选项,找到githubpages 页签,在source下面选择masterbranch/docsfolder 选项。即可完成。

展开查看全文

本文链接:https://www.hjjhkj.com/wenda/10947.html

版权声明:站内所有文章皆来自网络转载,只供主题演示使用,并无任何其它意义!

发表评论

提交评论

还没有评论,快来说点什么吧~

联系客服
网站客服 业务合作 QQ交流
182111886
公众号
公众号
公众号
返回顶部