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

个人博客网站搭建[通俗易懂]个人博客网站搭建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)


相关推荐

  • 把织梦安装到子目录,不读取CSS 没有样式?

    把织梦安装到子目录,不读取CSS 没有样式?

  • JAVA 取余 余数「建议收藏」

    JAVA 取余 余数「建议收藏」在java中%的含义为取余。java:a%b数学公式a%b=a-(a/b)*b

  • mysql做pisa_群晖nas修改MariaDB配置文件

    mysql做pisa_群晖nas修改MariaDB配置文件家里的Nas使用率越来越高,平均每周手工重启一次,系统运行还算稳定。最近安装了WebStation,MariaDB等套件,用来作为家里的开发测试环境,使用下来还不错。理论上解析个动态域名到nas就能实现对外提供web服务了。100M电信光纤,上行2M,做个个人网站访问速度凑合着应该还是能用的。在导入数据时,因数据库包比较庞大(>100M),需要修改max_allowed_packet字段。…

  • 软件测试面试的自我介绍模板(无经验者面试软件测试)

    面试官,你好,我叫Jayce,16年本科毕业,从事软件测试将近3年的时间。在此期间做过一些项目也积累过一些经验,能够独立地完成软件测试流程的一个工作。我之前主要做过的是功能测试,web自动化测试、app专项测试、接口测试、也有用过Jmeter做过一些性能方面的测试。我对于缺陷管理工具比如禅道,版本控制器git与svn能够熟悉应用。数据库、linux、Fiddler、Jmeter这些应用也比较熟悉。…

  • 使用JDBC建立数据库连接的两种方式[通俗易懂]

    使用JDBC建立数据库连接的两种方式[通俗易懂]使用JDBC建立数据库连接的两种方式:1.在代码中使用DriverManager获得数据库连接。这种方式效率低,并且其性能、可靠性和稳定性随着用户访问量得增加逐渐下降。2.使用配置数据源的方式连接数据库,该方式其实质就是在上述方法的基础上增加了数据库连接池,这种方式效率高。数据源连接池的方式连接数据库与在代码中使用DriverManager获得数据库连接存在如下差别:1)数据源连接池的方

  • python+pycharm安装_pycharm安装教程2020

    python+pycharm安装_pycharm安装教程2020python与pycharm的下载与安装前言一、python的下载安装1.python的下载2.python的安装二、Pycharm的下载安装1.Pycharm的下载2.Pycharm的安装三、python与pycharm的安装包总结前言本文将会介绍python的下载,安装,pycharm的下载,安装,激活,以及一些注意事项一、python的下载安装1.python的下载https://www.python.org/这里直接给出python的官方网站(注:有些同学可能打不开网站,..

发表回复

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

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