各位老铁们,大家好,今天由我来为大家分享个人网站java源码分享下载,以及个人网站java源码分享下载不了的相关问题知识,希望对大家有所帮助。如果可以帮助到大家,还望关注收藏下本站,您的支持是我们最大的动力,谢谢大家了哈,下面我们开始吧!
一、前言
网站主题最初是在开发数据api的时候看到的,当时在学习Mybatis-Plus,最初也不知道这是个主题,就觉得Mybatis-Plus官网UI真的不错,直到后面发现另外一个类似的网站,我意识到这是个模板,于是有了自己也搭建一个的想法,不过拖延症相当严重,最初是在宝塔上修改的,效率极低,一度放弃部署,直到最近换成本地开发才好了很多,也就是最近网站搭建初步完成,接下来就是往里面增加文章等等,这里带大家从零开始搭建Vdoing主题网站,算是对过去一个月的知识总结。下图就是mybatis-plus官网,是我们年轻人喜欢的风格(这里随便吐槽一下xx园吧,风格还是20年前的,不知道他们的UI设计师是不是还是兼职的)。
二、准备工作
1.github注册
what?你居然没有github账号,建议你放弃网站部署(开玩笑)。作为全球最大的代码托管平台,基本上每个稍微接触过开发的应该都用过,如果你还没注册的话,赶紧注册一个,没听过github太丢人了,注册也很简单(有手就行)。
点击进入github官网,这里需要注意一点,如果是国内访问的话,移动是可以的,其他运营商貌似有屏蔽,如果访问不了,自行百度解决。
2.申请属于自己的域名
这里推荐去国外的Godaddy平台注册一个域名
3.申请注册vercel平台
vercel平台是一个可以免费托管个人网站的自动化部署平台,只要你的代码托管平台(类似github,gitlab,gitee等)commit发生变化,它就会自动更新和重新部署,解放生产力。
点击vercel官网signup注册一个账号,当然也可以选择github直接登录,会更方便一点,可以直接导入自己的仓库,包括私有仓库。
4.下载node和yarn
node
进入node的官网,选择LTS即长期稳定版本下载。会得到一个msi后缀的文件,即开箱即用的版本,不用自己手动配置环境变量啥的,会配置好的,注意安装位置改一下就行,放在除c盘外的盘即可,其他就一步步点击确认即可,最后cmd中输入node有welcome提示即为成功,不成功按照相应提示浏览器搜索即可。
yarn
这个是个包管理工具,和npm差不多,听说更快一点,这里安装是由于主题更新采用的是这个命令,所以这里安装一下。
yarn官网,如果不想配置环境变量的话,还是可以采用msi后缀安装。
5.图床配置
CDN+COS配置图床
有了图床,你就可以随时随地采用URL引用你的图片,非常方便,可以参考我写的这篇搭建博客CDN+COS搭建图床超详细步骤,有个缺点就是需要备案才能使用自定义域名和CDN服务,不过如果想要白嫖的话,搜索国外的图床也是可以的,国内也有一些提供图床配置的,使用它们的域名上传图片也可以。这里采用的是pic-go图床管理工具,强烈安利,真的太方便了。
路径引用
如果你没有自己的图床也没关系,主题博客还提供本地引用的功能,不过这个更改图片的时候比较麻烦,虽然有时候它可能更快一点点。
6.开发IDE下载
我是用习惯了idea,所以这里推荐idea进行开发,安装node.js插件,然后就可以本地开发了,没有的话安装一下即可。
idea官网
安装node.js插件
至此,准备工作已经完成,接下来就进入今天的主题。
三、本地开发
1.githubfork项目
Vdoing主题项目地址,这里建议fork整个仓库,然后自己做一些修改即可,作者大大真的太强了。
2.基础网站配置
主页配置
打开以下目录的index.md,你可能会问咋是md格式的,不应该是html格式的吗?别着急,这个是开发中的,打包之后是index.html
以下字段对应相关的图,可以自行体会一下,对应导航栏下面的几个字段,其中涉及使用URL引入的,可以替换成路径引用,具体字段帮助请自行查看fork过来的仓库介绍,也可以到Vdoing官方文档查阅.
home:true\nheroImage:https://img.de7v.com/img/new_logo_2.png\n这个路径在public下的img目录中\nheroText:IT七剑客\ntagline:互联网中的持剑者\nactionText:立刻进入→\nactionLink:/wresource/\nbannerBg:none
通过路径引用的图片目录,把你想要的图片全放进去然后就可以引用了。
config.ts配置
进入config.ts界面
首先我们先找到head位置进行配置,打开网站的小图标,同样也可以使用URL或者本地引用
找到location开头的这段代码,网站的标题和描述写一下,这个会在百度搜索的快照中展示。
locales:{\n&39;:{//代表baseurl,即网站所有的引用的根路径,默认是没有的,如果文件夹有需要可以修改\nlang:&39;,\ntitle:&34;,\ndescription:&39;,\n}\n},
下面这些代码主要是配置导航栏和其他全局功能,其中logo是最左侧显示的图片,repro是自己的github名,用于直接跳转github主页,其他的取默认即可。
sidebarDepth:2,//侧边栏显示深度,默认1,最大2(显示到h3标题)\nlogo:&39;,//导航栏logo\nrepo:&39;,//导航栏右侧生成Github链接\nsearchMaxSuggestions:10,//搜索结果显示最大数\nlastUpdated:&39;,//开启更新时间,并配置前缀文字string|boolean(取值为git提交时间)\ndocsDir:&39;,//编辑的文件夹\n//docsBranch:&39;,//编辑的文件所在分支,默认master。注意:如果你的分支是main则修改为main\neditLinks:true,//启用编辑\neditLinkText:&39;,
footer:{//页脚信息\ncreateYear:2022,//博客创建年份\n//博客版权信息,支持a标签\ncopyrightInfo:&34;https://img.de7v.com/img/badge.png&34;zoom:30%;&34;https://beian.miit.gov.cn&34;_blank&34;https://img.de7v.com/img/badge.png&34;zoom:30%;&34;_blank&34;noopener&34;http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=35012102500470&39;\n},
至此基本配置已经大功告成,接下来我们谈谈文章是怎么配置和主页路由的规则。
文章誊写和路由设置
首先配置目录页,这个是文章的导航界面,可以分别查看各个目录下的文章列表
—\npageComponent:\nname:Catalogue\ndata:\npath:01.wresource安卓\nimgUrl:https://img.de7v.com/img/wresource.png\ndescription:Android,Kotlin,Jetpack等技术\ntitle:wresource安卓\ndate:2020-03-1121:50:53\npermalink:/wresource\nsidebar:false\narticle:false\ncomment:false\neditLink:false\nauthor:\nname:wresource\nlink:https://github.com/xyh-fu\n—
在这里设置目录的路由以及一些基础的配置,放图自行体会,这里需要注意一点,path要和docs下面的相应文章目录路径名一致,这里仅仅只是配置一下界面,真正的文章是放在docs下面的目录中。
关于文章誊写和命名规则具体查看作者的这篇文章关于目录和文章名称约定(这里偷懒一波)。
接下来再次回到之前得index.md中,可以配置主界面相关信息了
features:可选\nimgUrl:https://img.de7v.com/img/wresource.png39;fs&39;path&39;gray-matter&39;chalk&39;..&39;..&39;..&39;docs&39;&39;.vuepress&39;@pages&39;docs&39;.&34;${filePath}&39;md&39;&39;k&39;&39;k&39;剔除frontmatter后的文件内容字符串&39;h&39;h&39;m&39;d&39;d&39;h&39;1&39;m&39;utf8&39;&39;script&39;data-ad-client&39;自己的广告id&39;async&39;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&34;https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js&34;adsbygoogle&34;display:inline-block;\nwidth:200px;\nheight:200px&34;ca-pub-广告id&34;用户名&39;script&39;https://hm.baidu.com/hm.js?百度统计码',\n},\n],
复制
评论配置
这个是最近配置成功的,踩了好多坑,也是参考kbt大大的博客,我用的也是twikoo评论,之前使用gittalk的,后面发现国内根本不能访问,所以换成了目前这个评论系统。kbt大大写的搭建评论的博客,说明几个坑。
部署时注意是部署云函数,不是该评论系统项目,被这个坑了好久好久。
点击自动部署会自动进入dev分支下的vercel配置,不是整个仓库
关于mongodb,感觉应该是香港节点会更快一点,不知道为啥会推荐us节点关于环境id
这里应该是最近vercel的默认域名被禁的缘故,vercel.app之类的域名国内均不能访问,所以在部署环境id时需要添加自己的域名进行部署,类似xx.de7v.com。
关于管理员的评论管理
最开始是使用代理才可以进行配置的,之前都失败了,这一步如果没有默认的密码账号输入的话,建议开代理。
四、站点部署
1.COS+CDN部署
温馨提示,这部分部署需要国内备案域名,如果没有备案域名,请使用其他两种方式部署。
首先先运行vuepress项目,进入项目路径,终端输入以下命令进行构建项目
npmrunbuild
复制
生成静态文件成功之后可以在dist文件夹找到打包好的静态文件
先创建一个存储桶
上传文件
直接将文件复制一下拖拽到cos的以下界面,注意是dist里面的文件,不要传dist整个文件夹,反正最后是存储桶中有如下的内容,即dist里面的文件。
开启静态网站设置
此时还访问不了,如果想直接访问的话,权限管理改成公共读就可以访问了,使用访问节点的url即可,不过我们要介绍使用cdn进行访问,更快。
cdn配置访问
利用cdn进行私有读写,cdn提供给外部访问,配置相关可以查看这篇博客里面的配置,几乎是一样的,不多赘述。CDN+COS搭建图床超详细步骤,最后记得开启https访问。
至此我们已经完成了cos+cdn部署静态网站。下面是部署成功的站点,访问速度还可以。
2.vercel部署
vercel部署可以说是最简单的部署,还带自动化部署的功能,强烈推荐,目前主站是部署在vercel上的。
进入主界面,选择添加新项目:AddNew,选择Project
之后就是选择导入github中的项目,私有仓库也可以,gitpage中这个功能貌似收费,只能public。
配置运行参数,这部分是当初最坑的那个,当时不知道输出填啥,一直构建失败
先选择vue.js构建
接下来就是build和Outputsettings,按照以下设置即可
其中outputdirectory是很坑,之前不知道这个是输出文件,一直部署dev模式的网站,速度感人。
点击deploy即部署的意思
接下来就是稍微有点长的构建时间,大概10分钟吧,主要是Vdoing作者的文章比较多,构建需要花一定时间。
部署完毕是这样的,不过目前有个小尴尬的事情,自动提供的这几个域名国内访问不了,所以只能自己添加域名了。
在domains中添加自己的域名
先添加,然后根据提示进行添加dns解析
按照提示添加完解析即可
添加完会自动帮你添加ssl证书
大功告成
至此部署已经完成,之后只需要远程提交自己的修改到github上面即可完成修改界面。
创建静态网站
记得填入自己的域名并添加dns解析
将里面的文件删去,最后一个.user.ini没删除问题不大,最主要是为了防止冲突
上传完解压一下就行
将解压后的文件复制到网站最开始的目录下,并删去原来的dist和dist.rar文件
最后申请一下免费的证书和开启强制https就结束了(声明,没有hhh.com域名,只是随便输一个)
浏览器键入自己的域名就可以访问了,我的宝塔部署的站点IT七剑客,挺快的,比之前dev模式好多了
五、常用命令
安装node依赖
自动安装缺少的依赖
npminstall
项目调试
在测试功能时使用,该模式下,所有改动均可以快速看到效果,无需重新构建
npmrundev
项目打包
用于生成环境的打包,项目成功之后可以打包,然后部署到各个地方
npmrunbuild
六、写在最后
这次网站的部署大概经历了前前后后一个月,都是凌晨肝一会,书读的少,做事就非常费劲。希望大家能够通过我的这篇文章少走弯路,那这篇文章就是有价值的,有问题评论区留言。
个人网站java源码分享下载和个人网站java源码分享下载不了的问题分享结束啦,以上的文章解决了您的问题吗?欢迎您下次再来哦!
