个人博客网站搭建[通俗易懂]

个人博客网站搭建[通俗易懂]个人博客网站搭建VuePress介绍本人的个人博客网站,网站地址,是基于VuePress进行搭建。什么是VuePress根据官网:VuePress由两部分组成:第一部分是一个极简静态网站生成

大家好,又见面了,我是你们的朋友全栈君。

个人博客网站搭建

VuePress介绍

本人的个人博客网站,网站地址,是基于VuePress进行搭建。

什么是VuePress

根据官网:VuePress 由两部分组成:第一部分是一个极简静态网站生成器,
它包含由 Vue 驱动的主题系统和插件 API,另一个部分是为书写技术文档而优化的默认主题,
它的诞生初衷是为了支持 Vue 及其子项目的文档需求。每一个由 VuePress 生成的页面都带有预渲染好的 HTML,
也因此具有非常好的加载性能和搜索引擎优化(SEO)。

同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),
其他的页面则会只在用户浏览到的时候才按需加载。

VuePress 工作原理

事实上,一个 VuePress 网站是一个由 VueVue Routerwebpack驱动的单页应用。
如果你以前使用过 Vue 的话,当你在开发一个自定义主题的时候,你会感受到非常熟悉的开发体验,
你甚至可以使用 Vue DevTools 去调试你的自定义主题。

在构建时,我们会为应用创建一个服务端渲染(SSR)的版本,
然后通过虚拟访问每一条路径来渲染对应的HTML。

快速开始

前置条件

1、在开始之前我们需要确保你的本地是由nodejs的环境,我们先来验证一下,
打开的命令行工具,我的是mac所以打开的终端(Windows打开cmd),输入一下命令:

 node -v

个人博客网站搭建[通俗易懂]

说明:出现版本号,说明你本地是有环境。

2、接着我们来验证是否有npm工具:

 npm -v

个人博客网站搭建[通俗易懂]

如果有的小伙伴没有相关环境:请按如下提示进行环境准备

1、下载nodejs

登录nodejs官网:nodejs官网

个人博客网站搭建[通俗易懂]

下载符合你个人系统的软件,进行安装,安装过程很简单,这里就不过多赘述。
安装完成后,继续上面所说的进行验证node的版本和npm的版本

正式开始

1、创建目录

在你的终端执行进行入的放放置项目的目录,创建一个目录,如下命令:

// 进入一个目录
cd 你的目录
//创建一个 blog_web 目录
mdkir blog_web

2、初始化目录

//进入 blog_web
cd blog_web
//初始化目录
npm init -y

根据提示设置一些必要的信息,无需设置直接回车,最后输入yes,设置完成后,如下图所示:
个人博客网站搭建[通俗易懂]

此时,blog_web目录先会有一个package.json文件,打开文件看一下有什么信息。

//编辑文件
vi packag.json
{
  "name": "blog_web",
  "version": "1.0.0",
  "description": "我的博客网站",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "北漂码农有话说",
  "license": "ISC"
}

可以看到,就是我们刚才设置的一些信息。

3、安装VuePress

//安装在你的目录下
npm install -D vuepress

也可以进行全局安装

npm install -g vuepress

全局安装以后在任何目录下都可以使用VuePress

安装完成后可以看到项目下多了一个目录node——modules,这里都是我们需要依赖的文件。
个人博客网站搭建[通俗易懂]

4、创建你的博客相关目录

在blog_web目录下创建一个docs目录,进入docs目录创建.vuepress目录,
创建一个README.md文件,涉及的命令如下:

mkdir docs

cd docs

mkdir .vuepress

5、配置网站头

进入.vuepress目录下创建,config.js文件,配置以下信息

module.exports = {
    title: '北漂码农优化说',
    description: '欢迎来到我的博客'
}

6、配置网站首页

进入docs目录,打开README.md文件,配置如下内容:

---
home: true
heroImage: http://cdn.triumphxx.com.cn/img/%E9%A1%B5%E5%A4%B4.jpg
heroText: 北漂码农有话说
tagline: Java 全栈技术交流平台
actionText: 开始学习 →
actionLink: /
features:
- title: 纯原创
  details: 不做互联网的搬运工,我们踏实搞技术。
- title: 成系列
  details: 成系列的教程合集,告别碎片化学习,Java 学习一步到位!
- title: 有案例
  details: 文章都有配套案例,搜索微信公众号【北漂码农有话说】,及时获取文档更新通知!
footer: 关注微信公众号【北漂码农有话说】,众多技术呈现给你!

---

7、启动项目

进入到blog_web目录,加入如下脚本

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vuepress dev docs",
    "build": "vuepress build docs"
 }

在终端执行如下命令,启动项目:

npm run dev

出现如下信息说明启动成功

个人博客网站搭建[通俗易懂]

进行访问http://localhost:8080/

个人博客网站搭建[通俗易懂]

出现上面的画面,那么恭喜你,你想网站已经启动成功。

持续优化

1、配置网站角标

现在网站的头部很单调,我们需要进行优化

进入.vuepress目录下,在config.js文件下设置hand的信息,如下:

module.exports = {
    title: '北漂码农有话说',
    description: '欢迎来到我的博客',
    head: [
        ['link', {rel: 'icon', href: 'http://cdn.triumphxx.com.cn/img/%E5%85%AC%E4%BC%97%E5%8F%B71.jpeg'}],
    ],
}

2、配置网站logo、导航栏、侧边栏

进入.vuepress目录下,在config.js文件下信息,如下:

module.exports = {
    title: '北漂码农有话说',
    description: '欢迎来到我的博客',
    head: [
        ['link', {rel: 'icon', href: 'http://cdn.triumphxx.com.cn/img/%E5%85%AC%E4%BC%97%E5%8F%B71.jpeg'}],
    ],
    themeConfig: {
        logo: 'http://cdn.triumphxx.com.cn/img/%E5%85%AC%E4%BC%97%E5%8F%B71.jpeg',
        nav: [
            {text: '首页', link: '/'},
            {text: 'Java', link: '/java/'},
            {text: '前端', link: '/web/'},
            {text: 'GitHub', link: 'https://github.com/triumphxx'}
        ],
        sidebar: {
            '/java/': [
                '',
                'java1',
                'java2'
            ],

            '/web/': [
                '',
                'web',
            ]
        }
    }
}

配置完成后,需要在docs目录先创建java目录,并且在java目录下创建,READNE.md
java1.mdjava2.md文件,同理创建web目录。项目目录结构图如下:

.
├── docs
│   ├── README.md
│   ├── java
│   │   ├── README.md
│   │   ├── java1.md
│   │   └── java2.md
│   └── web
│       ├── README.md
│       └── web.md
├── package-lock.json
├── package.json
└── tree.txt

3、查看网站效果

首页

个人博客网站搭建[通俗易懂]

java

找一篇文章我们看一下效果

个人博客网站搭建[通俗易懂]

这样我们的静态博客网站就搭建完成了

小结

好啦,小伙伴们,到此我们的静态博客网站就基本搭建完成了。至于如何部署上线,微信搜一搜【北漂码农有话说】
我们下回分享。

GitHub

个人博客网站搭建[通俗易懂]

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/154527.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • 你的产品在强制用户按照你的意愿去操作吗「建议收藏」

    你的产品在强制用户按照你的意愿去操作吗「建议收藏」最近小编买了一台某品牌的洗衣机,在国内挺有名的品牌,因为相信这个品牌才买的。买完之后,小编自己在家洗衣服,发现老是滴滴响,然后终止运行了,本来简单的几件衣服,洗了一下午没洗完,自己甚是苦恼。自己看了一下机器上的告警编码,又看了一下说明书,发现是由于洗衣机为了防止漏水而发生告警。主要原理是这样的:洗衣机启动运行,开始进水,如果进水超过40分钟,还没有达到设定的水位,洗衣机就停止运转了,并发出滴滴的告…

  • sin的傅里叶变换公式_傅里叶变换的由来及复数下的傅里叶变换公式证明

    sin的傅里叶变换公式_傅里叶变换的由来及复数下的傅里叶变换公式证明1、考虑到一个函数可以展开成一个多项式的和,可惜多项式并不能直观的表示周期函数,由于正余弦函数是周期函数,可以考虑任意一个周期函数能否表示成为一系列正余弦函数的和。假设可以,不失一般性,于是得到:f(t)=A0+∑(n=1,∞)Ansin(nωt+Φn)2、将后面的正弦函数展开:Ansin(nωt+Φn)=AnsinΦncosnωt+AncosΦnsinnωt令a0/2=A0,an…

  • 模糊数学基础_模糊数学及其应用

    模糊数学基础_模糊数学及其应用模糊数学基础文章目录模糊数学基础1.前言2.区分随机性和模糊性3.模糊数学的基本概念1.模糊集和隶属函数2.模糊集的表示3.确定隶属函数的方法4.与传统集合论的区分4.模糊数学的基本运算1.模糊集的运算2.模糊关系与运算1.关系与模糊关系2.模糊关系矩阵的运算3.python程序求解法1.前言1965年美国著名控制论专家发表了FuzzySets从而开创了模糊数学的基本概念用“隶属度”和“隶属函数”来描述差异的中间过渡,处理和刻画模糊现象.处理现实现象的数学模型可以分为三

    2022年10月24日
  • 深入理解ConcurrentHashMap原理分析以及线程安全性问题

    深入理解ConcurrentHashMap原理分析以及线程安全性问题在之前的文章提到CurrentHashMap是一个线程安全的,那么我么看一下CurrentHashMap如何进行操作的。CurrentHashMap与HashTable区别?HashTableput()源代码从代码可以看出来在所有put的操作的时候都需要用synchronized关键字进行同步。并且key不能为空。这样相当于每次进行put的时候都会进行同

  • ubuntu安装教程_ubuntu docker安装

    ubuntu安装教程_ubuntu docker安装卸载docker1.删除某软件,及其安装时自动安装的所有包sudoapt-getautoremovedockerdocker-cedocker-enginedocker.iocontainerdrunc2.删除docker其他没有没有卸载dpkg-l|grepdockerdpkg-l|grep^rc|awk'{print$2}’|sudoxargsdpkg-P#删除无用的相关的配置文件3.卸载没有删除的docker相关插件(…

  • mysql全文索引是什么_Mysql中的全文索引

    以前只是简单听说过Mysql有全文索引,但是一直没有认真去了解过。最近在《MYSQL必知必会》中学习到这个知识点,做下记录。首先,什么是全文索引?简单来说,全文索引其实就是类似于LIKE语句,把包含一定的字符串的的行记录挑选出来。那么问题来了,既然只是达到这个需求的话使用LIKE就行了,LIKE不行的话也还能使用正则表达式,为什么还要大费周章弄个全文索引出来呢?书上提到了三个原因:①性能,Like…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号