wordpress 赞 插件,郑州众志seo,合肥网络推广专员,添加数据库wordpress大家好#xff0c;我是程序员鱼皮。前段时间我们上线了一个新软件 剪切助手 #xff0c;并且针对该项目做了一个官网#xff1a; 很多同学表示官网很好看#xff0c;还好奇是怎么做的#xff0c;其实这个网站的背后还有个有趣的小故事。。。
鱼皮#xff1a;我们要做个官…大家好我是程序员鱼皮。前段时间我们上线了一个新软件 剪切助手 并且针对该项目做了一个官网 很多同学表示官网很好看还好奇是怎么做的其实这个网站的背后还有个有趣的小故事。。。
鱼皮我们要做个官网能下载应用就行一周时间怎么样
我们的前端开发 - 多喝热水同学一周太小瞧我了吧1 小时给你搞定
鱼皮唔嘈你很勇哦
本来以为他是开玩笑的没想到1 小时后他真的给我看了网站效果而且比预期的好太多了。我的评价是逆天。
他给我解释道其实我用了一个新框架基本不用自己写代码而且还可以白票平台来免费部署网站~
鱼皮不错不错回头给我的读者们也分享一下
于是就有了下面这篇文章
对于前端同学来说用的最多的 Web 框架无非就是 React/Vue/Angular 这三大件了那本文将带你了解一个新的 Web 框架 Astro并手把手带你使用 Astro 搭建一个属于自己的站点用过的都说真香
关于技术栈的选择
假如现在有这样一个需求公司需要你去做一个官网落地页没什么别的要求界面美观且能介绍公司就行你会怎么选技术栈
如果是以前我可能会挑一个自己熟悉的语言去快速开发但是现在你问我选什么技术栈我可能会选择 Astro为什么且听我娓娓道来
首先如果是自己花时间去开发的话我们需要搭建网站的整体布局如导航栏、logo、页脚等等还需要考虑移动端的适配、网站 SEO 优化等等…
我不知道你们会不会觉得有点烦反正我是有点烦了且自己做出来的可能还没那么好看… 如果布局、适配、SEO 这些都配好了只需要改改文字的话那该多好 没错依靠 Astro 强大的主题生态就可以帮助我们快速完成这些事情像我们公司的产品 剪切助手https://jianqiezhushou.com 的官网就是用 Astro 搭建的如下 还是很好看的有木有且移动端的响应式适配、SEO 通通都搞定一举多得
接下来我们就简单了解一下 Astro 这个框架然后使用 Astro 快速生成一个自己的站点
Astro 框架介绍
关于 Astro 的介绍官方文档https://docs.astro.build/zh-cn/concepts/why-astro给出了很明确的定位“最适合构建像博客、营销网站、电子商务网站这样的以内容驱动的网站的 Web 框架” 它默认就支持服务端渲染且支持 React、Preact、Svelte、Vue、Solid、Lit、HTMX、Web 组件这意味着你可以用任意框架的写法来编写 Astro这一特性在 Astro 中被称为 “群岛”。
快速拥有一个 Astro 应用
这里我们不会从零到一的去介绍 Astro 的写法感兴趣的同学可以简单从官网过一遍入门指南https://docs.astro.build/zh-cn/getting-started我们要做的就是依靠 Astro 强大的主题模板实现只需要改改文字、写一写 Markdown 就能轻松搭建一个漂亮的博客网站
1选择主题模板
进入 Astro 官方模板网站https://astro.build/themes挑选一个自己心仪的模板如下 我选择的模板是 https://astro.build/themes/details/astro-boilerplate/ 我们进入到这个模板的详情页可以看到有两个按钮如下 第一个是源码第二个是在线效果的演示。
我们点击 Get Started 获取项目的源代码。
2查看模板的 README 文档 通过 README 文档我们可以了解到如下信息 怎么去启动这个项目怎么构建发布
如下图 那么接下来我们就按照 README 中所描述的步骤来操作第一步我们先把项目拉取到本地执行如下命令
git clone --depth1 https://github.com/ixartz/Astro-boilerplate在编辑器中打开这个项目并安装项目依赖如下 安装依赖完成后启动项目项目启动后我们访问 http://localhost:4321 如下图 ok现在我们就得到了一个最原始的模板和之前的预览效果是一致的如下 3更换项目中的个人信息
现在我们要做的就是把里面的文字换成自己的信息没有的信息我们可以删掉这里可以通过查看 index.astro 文件来了解整个网站的大致布局从而找到我们要调整的组件如下 如果你不知道怎么调整也可以用另一种更简单的方法直接搜索内容关键词来找到我们要修改的内容如下 下面是我调整后的效果如下 看起来也不赖主打一个简约风格。
4如何发文
这是一个博客站所以还需要找到发文入口我们找到 posts 文件夹在此文件夹下编写 markdown 文件即可配置按已有的格式修改如下 ok接下来我们就尝试一下发一篇文章在 posts 文件夹下新建一个 md 格式的文件往里面写入一些内容如下 可以看到我们编写的 markdown 已经被解析为了文章
至此网站的搭建已经结束了剩下的就是自己在上面添加内容。
现在网站我们有了还需要让别人能够访问你的网站一般到这一步我们需要服务器域名等等如果没有的话怎么办
白票将白票贯彻到底 我们可以白票的第三方服务有
1GitHub Pages
2Netlify
3Cloudflare
4Vercel
等等…
这里我们就以 Netlify 为例其他的大家感兴趣可以自行去了解。
部署
1创建仓库
首先我们需要一个能够存放代码的地方我们去 GitHub 创建一个代码仓库并上传代码如下 2将仓库关联到 Netlify
进入到 Netlify登录页https://app.netlify.com/login这里因为我们的代码放在了 GitHub所以我们选择使用 GitHub 进行登录如下 选择导入已有的项目如下 从 GitHub 导入如下 找到我们博客所在的代码仓库如下 点击仓库我们会进入到部署配置页如下 一些关键的配置说明都列出来了按照要求配置即可没有特别说明的目前不需要关注点击部署后等待几分钟即可完成部署如下 现在我们访问 https://codereshui.netlify.app 就能看到部署的网站了且后续有新的内容变更的时候比如发文网站会自动构建并发布
妥妥的一条龙服务好了这篇文章就肝到这里大家也可以把自己的网站搞起来了
更多 编程学习交流编程导航 简历快速制作老鱼简历 ✏️ 面试刷题神器面试鸭
