当前位置:首页 > 生活 >

如何搭建个人博客(5分钟学会搭建个人博客)

来源:原点资讯(m.360kss.com)时间:2024-07-19 11:10:40作者:YD166手机阅读>>

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

效果:

  • 封面

如何搭建个人博客,5分钟学会搭建个人博客(1)

  • 内容页

如何搭建个人博客,5分钟学会搭建个人博客(2)

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

简单而言

  1. 去官网下载nodejs:https://nodejs.org/en/,安装好
  2. 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
3、简要说明一下步骤
  • 使用docsify命令生成文档站点
  • 在github上部署站点
docsify官网

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

使用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.git git push -u origin master // 推送到远程myblogs仓库

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

使用Github Pages

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

最后欢迎来参观一下我的博客:https://scriptwang.github.io/blog/#/

,

栏目热文

个人博客搭建平台(如何在不同平台上搭建个人博客)

个人博客搭建平台(如何在不同平台上搭建个人博客)

前言HI,朋友们,我是希留。 几乎每个程序猿都梦想有一个自己的博客平台,拥有自己的个人博客应该是一件令人向往的事情,可以...

2024-07-19 11:14:37查看全文 >>

房产契税和房产税的区别(契税和房产税的区别是什么)

房产契税和房产税的区别(契税和房产税的区别是什么)

个税是日常生活里较为常见的税种,只要人们的工资达到了起征点,那么相信在工资条上每个月都能见到个税,但契税就不一样了。契税...

2024-07-19 11:24:46查看全文 >>

房屋契税是房产税吗(房屋契税是房产税吗)

房屋契税是房产税吗(房屋契税是房产税吗)

根据《财政部 国家税务总局关于房产税城镇土地使用税有关问题的通知》(财税〔2008〕152号)第一条规定,对依照房产原...

2024-07-19 11:15:20查看全文 >>

房产税和房产契税有什么区别吗(房产税和契税的计税依据一样吗)

房产税和房产契税有什么区别吗(房产税和契税的计税依据一样吗)

大家好,今天我想和大家聊聊房产税和房地产税的区别。有些朋友可能会混淆这两个概念,但其实它们是不同的。房产税的纳税人是拥有...

2024-07-19 11:38:59查看全文 >>

房产税跟契税是一回事吗(个人房产税和契税的区别)

房产税跟契税是一回事吗(个人房产税和契税的区别)

朋友们好,前两期视频已经基本上掌握了增值税和个税是如何去计算的,那么契税又应该如何去算?为什么要缴纳契税?今天就带你们去...

2024-07-19 11:11:58查看全文 >>

怎么处理颈纹(去颈纹最有效的运动)

怎么处理颈纹(去颈纹最有效的运动)

来源:南方医科大学皮肤病医院时光流逝年龄增长面部的色斑、毛孔、红血丝、皱纹这些老化的象征增多美女们不断的进行面部美容扼制...

2024-07-19 11:21:14查看全文 >>

没有参加学考的可以高考吗(没有参加合格考能参加高考吗)

没有参加学考的可以高考吗(没有参加合格考能参加高考吗)

在升学或就业方面,孩子的智商差距并不显著,而是取决于父母的认知和信息资源。你认同这种说法吗?对于一些家长来说,他们仍然存...

2024-07-19 11:16:21查看全文 >>

高考录取要参考学业水平成绩吗(高考参考哪三门学业水平考试成绩)

高考录取要参考学业水平成绩吗(高考参考哪三门学业水平考试成绩)

北京教育考试院近期发布学业水平合格性考试与高考高招相关部分问题解答,一起来看看吧!Q参加北京市普通高等学校本科层次招生,...

2024-07-19 11:22:35查看全文 >>

没参加学考可以参加高考吗(学考不参加能参加高考吗)

没参加学考可以参加高考吗(学考不参加能参加高考吗)

亲爱的读者,你是否因为中考的失利而感到迷茫,不知道未来的路在何方?别担心,职高生同样可以考大学,只要你愿意努力,未来依然...

2024-07-19 11:17:28查看全文 >>

没有过学考可以高考吗(学考需要全部通过才能参加高考吗)

没有过学考可以高考吗(学考需要全部通过才能参加高考吗)

高考是我们国内的普通高中生上大学需要参加的考试,通过高考成绩分数的高低来筛选学生上国内不同的大学。如果学生平时成绩不是特...

2024-07-19 11:18:16查看全文 >>

文档排行