来快速搭建个人博客网上教程千千万，但总归都是零零散散的，没人会给你讲解得清清楚楚，所以我这里就手把手来讲解一下如何从零搭建启动好以后会自动打开网页，我们可以看到这样的画面了，可以说这个主题的脚手架已经帮我们做了很多工作了，页面也非常的漂亮，其对应的就是比较简约化的文档样式了，当然了这些都是脚手架帮我们处理好了的个导航栏按钮，但实际呢？配置的话也比较简单，模仿默认的配置去做就可以了：
前言
我相信很多人都想拥有自己的个人博客。现有的个人博客搭建框架有很多，比如 hexo , , 等，这里我选择快速搭建个人博客
网上教程成千上万，但都是零散的，没有人会解释清楚的，所以我在这里解释一下如何从零开始搭建。
这里是官网链接：(new)[1]
1一、准备工作
首先我们需要下载我们需要的所有东西，比如：node、git、
节点下载链接（新）[2]
git 下载链接（新）[3]
2二、安装脚手架
这里应该安装，不过是文档类型的页面，比较简单。我们肯定是想让我们的博客看起来更好看，所以这里有一个大佬做的主题——reco，其页面效果大致是这样的：
找一个随机路径，在终端输入这个命令：
// npm
npm install @vuepress-reco/theme-cli -g
下载完成后，输入命令初始化项目：
theme-cli init blog
初始化的时候会要求你填写一些信息，比如：博客名称、博客标题、博客描述..
您只需要回车即可跳过所有这些，您可以自己填写以下信息
项目全部初始化后，文件目录如下：
├── blog
├── .vuepress
│ ├── public // 存放静态资源
│ │ ├── avatar.png // 头像图片
│ │ ├── favicon.ico // 网站icon图标
│ │ ├── hero.png // 我也不知道有啥用，删了也可以
│ │ └── logo.png // 网站导航栏左上角的logo图片
│ │
│ └── config.js // 配置文件，非常重要！！！
├── blogs // 存放文章，即.md文件
│ ├── ...
│ ├── ...
│ └── ...
├── docs // 存放一些后续需要配置的文件，暂时不需要了解
├── .gitignore // 提交git仓库时需要忽略的文件
├── package.json // 管理包文件
└── README.md // 自动生成的，我们可以先不管
了解了文件目录结构后，我们需要启动项目看看，因为新生成的项目很多依赖包还没有安装，当前路径不在项目中，所以需要执行依次执行以下说明，制作一个启动项目
// 第一步，进到项目根目录中
cd blog
// 第二步，安装依赖包（这个过程很慢，需要等待）
npm install
// 第三步，等依赖包下完了以后再执行该指令启动项目
npm run dev
网页启动后会自动打开。我们可以看到这张照片。可以说这个主题的脚手架为我们做了很多工作，页面也很漂亮
3三、详细配置信息
这个页面上的所有东西都可以通过我们的配置文件来控制，也就是./.js，我们来看看它的具体配置信息是什么意思（这个很重要，因为如果你以后要改的话就页面必须在这里改，所以你必须非常熟悉每个属性的作用）
module.exports = {
"title": "",
"description": "",
"dest": "public",
"head": [
[
"link",
{
"rel": "icon",
"href": "/favicon.ico"
}
],
[
"meta",
{
"name": "viewport",
"content": "width=device-width,initial-scale=1,user-scalable=no"
}
]
],
"theme": "reco",
"themeConfig": {
"nav": [
{
"text": "Home",
"link": "/",
"icon": "reco-home"
},
{
"text": "TimeLine",
"link": "/timeline/",
"icon": "reco-date"
},
{
"text": "Docs",
"icon": "reco-message",
"items": [
{
"text": "vuepress-reco",
"link": "/docs/theme-reco/"
}
]
},
{
"text": "Contact",
"icon": "reco-message",
"items": [
{
"text": "GitHub",
"link": "https://github.com/recoluan",
"icon": "reco-github"
}
]
}
],
"sidebar": {
"/docs/theme-reco/": [
"",
"theme",
"plugin",
"api"
]
},
"type": "blog",
"blogConfig": {
"category": {
"location": 2,
"text": "Category"
},
"tag": {
"location": 3,
"text": "Tag"
}
},
"friendLink": [
{
"title": "午后南杂",
"desc": "Enjoy when you can, and endure when you must.",
"email": "1156743527@qq.com",
"link": "https://www.recoluan.com"
},
{
"title": "vuepress-theme-reco",
"desc": "A simple and beautiful vuepress Blog & Doc theme.",
"avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
"link": "https://vuepress-theme-reco.recoluan.com"
}
],
"logo": "/logo.png",
"search": true,
"searchMaxSuggestions": 10,
"lastUpdated": "Last Updated",
"author": "",
"authorAvatar": "/avatar.png",
"record": "xxxx",
"startYear": "2017"
},
"markdown": {
"lineNumbers": true
}
}
接下来我会按顺序解释各个属性的作用
(1）
这个属性代表博客的标题
让我们将值更改为 ，看看有什么变化
(2）
该属性表示有关网站的一些描述性信息
我们改变了这个网站的值是用来记录前端知识总结看看有什么变化
(3）目标
该属性表示项目打包后生成文件的目录
比如我们把dest的值改为./dist，那么当我们执行npm run打包文件的时候，会在当前根目录下生成一个dist文件夹，打包的项目文件就在这个文件夹
(4）头
该属性表示html文档的head标签中需要插入的其他标签
默认生成为：
"head": [ // 在head标签中生成以下标签
[
"link", // 生成link标签
{
"rel": "icon", // rel属性值为icon
"href": "/favicon.ico" // href属性值为 /favicon.ico
}
],
[
"meta", //生成meta标签
{
"name": "viewport", // name属性值为viewport
"content": "width=device-width,initial-scale=1,user-scalable=no" // content属性值为width=device-width,initial-scale=1,user-scalable=no
}
]
]
当然我们也可以继续添加其他标签，比如：
"head": [ // 在head标签中生成以下标签
["link", { "rel": "icon", "href": "/favicon.ico" }],
["meta", { "name": "viewport", "content": "width=device-width,initial-scale=1,user-scalable=no" }],
["meta", { "name": "keywords", "content": "前端,js,css" }],
['meta', { name: 'author', content: '零一' }],
]
(5）
该属性表示当前项目使用的主题
这里我们使用–reco主题的脚手架，所以默认是reco，我们不需要修改，当然以后可以使用其他主题，可以参考官网
(6）
该属性代表主题的配置信息
这里有很多东西，慢慢说吧
1.导航
该属性表示导航栏的配置信息
默认生成的nav值如下：
"nav": [
{ // 第一个导航按钮
"text": "Home", // 按钮名称为 Home
"link": "/", // 对应的跳转链接为 /
"icon": "reco-home" // 按钮的前置图标为 reco-home
},
{ // 第二个导航按钮
"text": "TimeLine", // 按钮名称为 TimeLine
"link": "/timeline/", // 对应的跳转链接为 /timeline/
"icon": "reco-date" // 按钮的前置图标为 reco-date
},
{ // 第三个导航按钮
"text": "Docs", // 按钮名称为 Docs
"icon": "reco-message", // 按钮的前置图标为 reco-message
"items": [ // 该按钮的子菜单
{ // 子菜单中的第一个导航按钮
"text": "vuepress-reco",
"link": "/docs/theme-reco/"
}
]
},
{ // 第四个导航按钮
"text": "Contact", // 按钮名称为 Contact
"icon": "reco-message", // 按钮的前置图标为 reco-message
"items": [ // 该按钮的子菜单
{ // 子菜单中的第一个导航按钮
"text": "GitHub",
"link": "https://github.com/recoluan",
"icon": "reco-github"
}
]
}
]
我已经在上面写了所有详细的注释
2.
该属性表示侧边栏的导航信息
默认生成为：
"sidebar": {
"/docs/theme-reco/": [
"", // 空字符串对应的是 README.md
"theme", // 对应 theme.md
"plugin", // 对应plugin.md
"api" // 对应api.md
]
},
这个配置信息的意思是当路径为/docs/-reco/时，侧边栏会自动找到路径./docs/-reco/下的.md、.md、.md、api.md文件进行处理识别并生成侧边栏，如图：
侧边栏中的文字其实是识别md文件中的，比如.md文件对应的名字就是的值
---
title: theme
date: 2020-05-27
---
This is theme.
这是一种写法，其实还有另一种更复杂的写法，我们来看看
"sidebar": {
"/docs/theme-reco/": [
{
title: '一些文件', // 标题信息
collapsable: true, // 是否可折叠
children: [ // 该块内容对应的所有链接
"",
"theme",
"plugin",
"api"
]
}
]
}
这个实现的效果其实和刚才差不多。如果有差异，可以看下图对比：
3.类型
该属性表示当前项的类型
默认是blog，也就是我们现在看到的样式。其实还有其他的值可以设置，比如docs，对应一个比较简化的文档样式。当然，这些都是帮助我们的脚手架。完成
4.
该属性表示导航栏的配置信息，由reco主题设置
不知道大家有没有注意到，刚刚设置nav导航栏信息的时候，导航栏按钮一共是4个，但实际上是什么？
实际上有 6 个，那么额外的两个是从哪里来的？其实是设置在
"blogConfig": {
"category": {
"location": 2, // 在导航栏中的位置在第二个
"text": "Category"
},
"tag": {
"location": 3, // 在导航栏中的位置在第三个
"text": "Tag"
}
},
这两个是内置设置，所以就这样配置，不过我觉得没必要，大家可以自己选择
5.
该属性用于设置好友链
网站上的具体位置如下图：
配置比较简单，模仿默认配置即可：
"friendLink": [
{
"title": "午后南杂",
"desc": "Enjoy when you can, and endure when you must.",
"email": "1156743527@qq.com",
"link": "https://www.recoluan.com"
},
{
"title": "vuepress-theme-reco",
"desc": "A simple and beautiful vuepress Blog & Doc theme.",
"avatar": "https://vuepress-theme-reco.recoluan.com/icon_vuepress_reco.png",
"link": "https://vuepress-theme-reco.recoluan.com"
}
],
6.徽标
该属性表示导航栏最左侧的logo图片，如下图所示
写入这个值时的根路径为 ，即/logo.png表示下的logo.png
7.
该属性表示是否有搜索功能
8.
这个属性的官网没有过多解释，所以不知道是什么，所以暂时不说了
9.
此属性表示每篇文章底部显示的“最后更新”副本
如下图：
10.
该属性代表作者姓名，将在每篇文章的作者署名中使用
11.
该属性代表作者头像，路径规则与logo相同。头像的显示位置如下图所示：
12. && && &&
免责声明：本文来自网络用户投稿，不代表本站观点和立场。如有侵权请发送邮件至tzanseo@163.com告知本站删除，本站不负任何责任及承诺。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
微信
支付宝
相关推荐
-
五g网络优化工程师，月收入能够在什么样的范围内呢？
如果现在从事五g网络优化工程师的话，月收入能够在什么样的范围内呢？5g网络优化工程师是一个高薪岗位不同工程师的收入水平是不一样的，比如说如果刚刚入行什么技术还都不会的话，那么一般都是从测试工程师做起，测试工程师对于技术要求不高的话，月收入3000~所以5g网络优化工程师本身是个技术内容技术岗位的话，这些所涉及到的技术内容本身是可以通过再学习或者努力来弥补这方面的不足的，随着你进入到工作岗位之后
-
站长应该怎么发布网站的链接、如何发外链更容易被搜索引擎收录
而站长应该怎么发布网站的链接、在哪里发布网站外链、如何发外链更容易被搜索引擎收录、更容易提高网站的排名，对于这些困惑，这里给大家罗列了几种发外链的方法：同时发表网站的原创帖子并加上自己网站的链接，在多个论坛中进行发表，提高论坛等级和发帖质量，这有利于网站外链被搜索引擎收录。站长可以通过搜索网站导航来选择一些国内知名的网址导航发外链，如网址导航、265网址导航、2345网址导航等。
-
如何做好SEO优化，优化具体需要做什么？(图)
如何做好SEO优化，SEO优化具体需要做什么？其实问题也就那么多，很多人也就想得不那么的全面，想不得那么全面的来做SEO优化，优化的效果并不是很明显的，那SEO优化到底要怎么做呢？SEO站外优化主要做一做外链，外链也是影响关键词在百度排名中一个重要的因素之一。注册几个比较高权重的博客，主要是给自己的网站做做外链优化。主要内容要根据自己的网站展开内容，也就是要有相关性的内容页面。
-
metameta标签的典型运用，你了解多少？(组图)
根据HTML语言标准注释：meta标签是对网站发展非常重要的标签，它可以用于鉴别作者，说明：用来告诉搜索引擎你网页的关键字是什么。所以,我们必须记住添加和的meta标签，并尽可能写好关键字和简介。利用HTML的注释语句，在页面代码里加入大量关键字。以上这篇如何为自己的网站添加关键字与描述详解就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持网页设计。
-
SEO从业者报价技巧和方法分享报价方法和技巧！
SEO从业者如果自己接网站优化的单子，或者SEO公司接网站优化单子，都要有一个步骤，那就是给客户报价，分享SEO关键词报价技巧和方法。今天笔者就和大家分享下SEO关键词报价技巧和方法。它们的原理无非就是判断某个关键词的搜索量，收录量，竞价网站多少等等。最后我们根据自己检索出来的关键词信息来估算价格。以上就是笔者关于SEO关键词报价的一点点心得。
-
打造百度快照天天更新的六大途径，你知道吗？
当然这些数据是更改不了的，我们要对我们的竞争对手有个大概的了解。这样我们才能在这个方面战胜竞争对手。这个就是我们要分析这些竞争对手的外链，前面也有提到过，外链不是说越多越好，最关键的是有相关性，而且还要稳定，我们这里要做的就是找到对方发外链的地方，我们也去发，他们没有发到的，我们也要去发，这样我们才能在外链上超过这些竞争对手。
-
1.一起研究百度图像搜索的SEO优化规则(图)
百度图像搜索的每日搜索量也是一个惊人的数字，因此搜索排名专家认为在网站内部做适当的事情也是不错的。百度图片主要是产品图片。首先是真实的人和真实的场景，其次是动画和动画（百度目前不具有识别图片的功能，主要依靠图片的高度和标题或手动操作）。搜索排名专家，这是每个人都需要澄清的内容，许多人只是认为，一旦搜索引擎中包含了一篇文章，用户就可以轻松找到它。
-
专业seo优化公司帮你分析站点关键词难易程度
专业seo优化公司帮你分析站点关键词难易程度。1、要看网站首页有多少排名靠前，具体做法是：用需要优化的关键字搜索，并观察有多少首页的搜索结果是网站的主页。2、看看同行网站的关键词布局。如果标题中的关键词分散或不完整，则可以进一步说明词语竞争力不强。通过对这些方面的考察，可以判断该网页的优化程度。想了解网站关键词优化难易程度，找专业seo优化公司就能解决