首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

手把手教你从零开始搭建个人博客,20 分钟上手

npm install -g hexo-cli 复制代码 这是因为网络问题(npm 的服务器位于国外下载慢),可以使用 cnpm(淘宝团队做的国内镜像)的获取镜像或者直接修改 npm 的资源获取地址为国内的...├── source:资源文件夹,存放静态资源如博客md文件、图片等。 └── themes:主题文件夹,Hexo通过将网站内容与主题组合来生成静态网站。...通过上面,我们已经得到了一个在线的、可以随时随地访问的个人博客,整个操作过程还是很简单的,麻烦的就是上传更新文章和部署项目了,每次部署都需要输入账号密码,另外由于 GitHub 服务器在国外,国内访问速度也很堪忧...然后我们需要到 GitHub 对应项目中设置项目的域名,进入项目-> Settings -> Page -> Custom domain,将我们设置的 CNAME 域名写入即可(注意是在这个项目的设置里...主要原因是 GitHub 服务器在国外,这个解决还比较简单,我们可以同时将项目部署到国内码云:https://gitee.com/或者 Coding:https://coding.net/,整个过程和将项目部署到

3.6K70

15 个 JavaScript 框架的全面概述

它被设计为平易近人、灵活且可逐步采用,允许开发人员将其用于项目的一小部分或将其扩展以构建复杂的单页应用程序 (SPA)。...优点 服务器端渲染和静态站点生成:Next.js 支持服务器端渲染和静态站点生成,从而通过向客户端提供预渲染的 HTML 来加快初始页面加载速度并改进 SEO。...小型项目的复杂性增加:对于不需要增强性能或 SEO 优化的小型项目,Next.js 的服务器端渲染和静态站点生成功能可能不是必需的。在这种情况下使用 Next.js 可能会带来不必要的复杂性。 8....使用案例: Nuxt.js 非常适合各种类型的应用程序,从小型项目到大型项目。它对于需要服务器端渲染或静态站点生成的应用程序特别有益。...丰富的插件生态系统:Gatsby 拥有庞大的插件生态系统,可扩展其功能。开发人员可以轻松地将 CMS 平台、无头 CMS、分析和部署服务等流行工具集成到他们的 Gatsby 项目中。

8.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    手把手搭建个人博客「图文教程」

    轻量: 无需拥有后台及数据库,专心写好你的文章 一键部署: 可以通过Git或者ftp来将生成的静态页面部署到服务器或者主机空间中 插件丰富: 丰富的插件可以满足你的各种需求....Hexo的工作机制 Hexo基于Node.js,将/source文件夹下的资源(文章,图片,模板),按照预定的配置文件,转换成静态页面放置到/public目录下.如果需要预览或者部署,hexo会把public...服务器为示例 为SSH连接创建密钥对 由于使用git作为部署,所以无法避免的我们要使用密钥对的方式来连接,而不是口令. 1....在服务器上安装Web服务器 Hexo会根据你的_config.yml配置的source_dir下的资源文件,在public_dir下生成静态网页,部署这些静态文件.本次在服务器上安装Apache作为web...设置Git Hook 我们使用Git Hook的目的就是,在Hexo部署时,会把Hexo生成的静态web资源,自动部署到web目录下. 我们需要一个post-receivew如下: #!

    2.7K40

    Hexo系列(1) - 简单搭建教程与远程部署

    另一个是使用Hexo,相对简洁高效,不需要服务器,既可以部署在本地,也可以将博客部署到GitHub Pages上,支持Markdown语法,缺点是需要有Git基础,写文章比WordPress麻烦点。...安装环境 安装Node.js 安装Git 安装Hexo 安装Node.js Hexo是一个基于Node.js的快速、简洁且高效的静态站点生成框架,想要安装Hexo,需要先安装Node.js,官网的安装包有两种...关闭Hexo服务器 要想关闭服务器,只需要在命令窗口按下Ctrl+C就可以了,这个组合键不仅仅用于关闭服务器,事实上你在cmd窗口中任何执行中的命令都可以用这个组合键来结束命令,只要连按两次该组合键就可以连输入...前者是站点配置文件,后者是主题配置文件,顾名思义,一个是Hexo项目的配置选项,一个是主题文件的配置选项。...最后介绍下如何将本地的个人项目远程部署到 GitHub Pages,涉及到GitHub的项目仓库、Git的使用,以及Hexo的远程部署等。

    72920

    2020 年的 JavaScript 后起之秀

    标准库”为通常需要在 Node.js 中安装软件包的常见需求提供解决方案 Deno 使用尽可能多的 Web 标准(例如:Fetch API) 使用 ECMAScript 模块导入的文件 内置测试运行器和调试器...最新版本提供了诸如“增量静态再生”(IncrementalStaticRecreation)之类的功能,这些功能带来了最佳的动态和静态环境,非常适合许多用例。...关于全栈框架,Blitz 和 Redwood 异军突起,旨在提供最佳的开发人员体验来构建完整的 Web 应用程序。...Scully 是一个静态站点生成器,将 Angular 带入 Jamstack。该项目于 2019 年 12 月启动,其中包含大量文档,可帮助开发者快速入门。...我们也将密切关注全栈框架 Redwood 项目,该项目可以很好地与 GraphQL 配合,并且具有使用其所谓的“单元”来处理数据提取的独特方法。

    2.4K20

    2023 年前端十大 Web 发展趋势

    最近刚刚被 Shopify 收购的 Remix,就采用不同方法将 React.js 转化为元框架(例如将 Web 标准设为优先)。而且在竞争之外,两套框架之间也有一定程度的功能融合(例如嵌套路由)。...尽管两种模式的基本用途并不相同,但凭借长久以来与静态站点生成(SSG)的竞争,SSR 如今已经拥有近乎完美的性能表现(参考 Next.js 和 Gatsby.js)。...但如果需要提供高度动态的内容,或者是交付以用户为中心的内容并涉及身份验证,则 SSG 适用性较差(在部署前一次性构建,即静态);这时候最好是在 SSR(能根据服务器上的单个数据请求按需构建)或者是最近热度飙升的...最初,Node.js 的目标只是将 JavaScript 和浏览器拆分开来,尝试将其运行在服务器端。但后来,JavaScript 成为过去十年间最成功的 Web 开发驱动力。...这些包可以在各种应用程序中直接导入:使用所有共享包的实际应用程序(例如 app.mywebsite.com 客户端渲染)、仅使用共享设计系统包且考虑 SEO 需求的主页 / 产品 / 登陆页面(例如由服务器端渲染或静态站点生成的

    3K20

    Next.js 有哪些主要功能?

    本文将深入探讨 Next.js 的主要功能,说明为什么它已成为开发人员构建现代Web应用程序的首选。...(ISR) 是 Next.js 的一项强大功能,可以在后台逐步更新静态页面,而无需重新构建整个站点。...这种方式结合了静态站点的性能优势和动态数据更新的灵活性。 ISR 的优点: 动态更新:允许静态站点的部分内容按需更新,确保内容实时性。...安全性:默认情况下,API 路由只在服务器端运行,隐藏敏感操作和数据,提升安全性。 灵活性:支持使用任何 Node.js 库,构建复杂的后端功能更加便捷。...通过利用这些功能,开发者可以构建出性能优越、可扩展性强、对搜索引擎友好的现代化 Web 应用。无论是个人项目还是企业级应用,Next.js 都能助您一臂之力。

    12000

    我的基于 JamStack 的新博客

    与垂直集成的传统 Web 应用程序不同的是, Jamstack 应用程序是模块化和分散式的:UI 可以通过静态网页服务器、CDN、甚至基于区块链的存储进行分发;后端 API 服务可以部署在云上,也可以由边缘节点就近提供服务...•部署托管:腾讯云 CloudBase[18],这里是使用了它的:•CloudBase CLI[19]:用于和 hexo deploy 一起工作,将网站文件发布到腾讯云上(静态部分具体使用了:DNSPod...•CloudBase CLI 是云开发(Tencent CloudBase,TCB)开源的命令行界面交互工具,基于 JavaScript 和 Node.js,用于帮助用户快速、方便的部署项目,管理云开发资源...JAM - 我的博客的部署架构 JAM 通用的用户访问路线如下所示: JAM 静态站点部分 Hexo 生产的站点,是完全的静态站点,全部都是静态文件,包括:HTML、CSS、JavaScript 和图片...) •Jamstack 不需要安装或管理应用程序数据库 (如 MySQL) •Jamstack 可以在不使用 HTTP (Web) 服务器 (如 Apache) 的情况下部署 Web 站点或 Web 应用

    89610

    Jexus 5.8.2 正式发布为Asp.Net Core进入生产环境提供平台支持

    Jexus 是一款运行于 Linux 平台,以支持  ASP.NET、PHP 为特色的集高安全性和高性能为一体的 WEB 服务器和反向代理服务器。...2,新增AppHost(HTTP自宿主应用程序管理器)配置项,用于对Asp.net Core、Node.js、Tomcat等自宿主应用程序的管理和高速数据转发,为自宿主服务程序提供了与站点操作相一致的同步管理和高可用性...6,新增对HTTP PATCH方法的支持。 7,修复当使用Https向fastcgi、反向代理POST数据时,可能出现数据不完整的BUG。 8,静态文件并发处理速度提升14%左右。...本版的亮点是新增“AppHost”配置项,将HTTP自宿主应用程序(如Asp.net Core应用程序、Node.js应用程序等)统一纳入Jexus的工作进程序列进行管控(启动、停止、重启、崩溃后自动恢复等管理...Core或Node.js等自宿主web程序用于生产环境具有重要的意义。

    1.5K60

    Serverless 开发实战之Nodejs:三分钟开发新冠病毒疫情查询网

    怎样借助工具,更快更好的部署自己的 Serverless 应用?本次课程将带你深入了解这些 Serverless 的最佳实战应用。...2、Serverless 的典型场景 3、深入理解 Serverless Component 4、为你的静态页面加上后端:搭建express框架  5、三分钟快速定制你的新冠病毒疫情信息查询网页 1...静态网站托管 以下是基于 Web 应用场景展开的,一个典型的应用是静态⽹站托管:通过结合云解析、SSL证书、CDN 和 COS 等组件,快速⽀持静态⽹站托管的场景。...全栈 Web 应用 一个完整的网站是静态和动态的结合,还会有分离的架构,结合上面的场景,静态资源可以托管到 COS 上,动态或数据流的请求可以通过 Express 等框架,然后通过 API 网关、SCF...部署成功后,可以直接在浏览器中访问日志中返回的 dashboard url 地址,查看该全栈 Web app 的效果 。 ? ● Serverless 架构揭秘与静态网站部署实战(附实战源码) ?

    1.5K64

    最流行的5大开源Web服务器

    在本文中,我们将介绍目前市场上最流行的5大开源web服务器,并简要回顾它们的历史,技术特性以及更多相关内容,方便你自己能够更加轻松的部署这些流行的web服务器。...这个词可以指代整个系统,也可以指代可接收和管理HTTP请求的的程序。本文中介绍的web服务器指的是为终端用户处理web请求的程序。...Lighttpd服务器 Lighttpd 是一个德国人领导的开源Web服务器软件,其根本的目的是提供一个专门针对高性能网站,安全、快速、兼容性好并且灵活的web server环境。...Apache是以进程为基础的结构,进程要比线程消耗更多的系统开销,不太适合于多处理器环境,因此,在一个Apache Web站点扩容时,通常是增加服务器或扩充群集节点而不是增加处理器。...就这样,诞生了Apache Group,后来这个团体在NCSA的基础上创建了Apache。如果你准备选择Web服务器,毫无疑问Apache是你的最佳选择。

    3.8K61

    Serverless 开发实战之Nodejs:三分钟快速定制你的新冠病毒疫情信息查询网页

    怎样借助工具,更快更好的部署自己的 Serverless 应用?本次课程将带你深入了解这些Serverless的最佳实战应用。...2、Serverless 的典型场景  3、深入理解 Serverless Component 4、为你的静态页面加上后端:搭建express框架 & 三分钟快速定制你的新冠病毒疫情信息查询网页 一、为什么...EF客户痛点: 原有业务基于服务器搭建部署,每⽉投⼊的维护成本较⾼,且公司逐渐倾向于把运维⼈⼒释放,加⼤开发的投⼊。...Components 构建、组合并部署你的 Serverless 应⽤。...⾼阶组件:基础组件的复⽤和组合 结合组件,构建 Serverless 应⽤ 现在Serverless对框架的支持并不局限于Node.js语言,还包括Python、PHP等,这些组件都是开源的。

    45420

    Gatsby 博客部署到腾讯云教程

    因工作原因我选择在腾讯云上部署自己的个人网站,你也可以在 GitHub Pages 或国内的 Coding 上托管 Gatsby 项目,然后 CNAME 绑定到指定的域名就可以,更加方便。...云服务器环境 Gatsby 最终会编译成静态站点,这里云服务器环境需要 Web 服务器存放静态网页,另外需要 Git 环境使用 git hook 钩子同步本地推送的文件到 Web 服务器,这里我以 CentOS...  配置 Git 仓库 接着,我们创建 Git 仓库,本地推送到仓库的文件,同步到前面创建的 Web 站点目录,同样先在服务器中创建 /www/git 目录。...站点目录和 Git 目录的关联关系(将下面两行代码粘贴进去), #!...参考上面创建站点的配置。 本地编译后部署到服务器 前面已经提到本地和服务器同步的机制,这里我们可以用 gh-pages ,很方便的把 Gatsby 编译后的静态文件同步至仓库。

    4.3K111

    《前端工程化》-- 2. 脚手架3. 构建

    项目类型决定的配置项将影响创建的项目文件内容和类型,而工程体系功能模块的配置项将影响生成的各个功能模块配置文件内容。...前端工程体系中的构建系统最重要的功能之一便是支持模块化规范并能够将散列的模块构建为利用部署的整合文件。...在静态资源使用增量更新策略的前提下,可以将静态资源先于动态html部署,此时静态资源没有引用入口,不会对线上环境产生影响;动态html部署后即可在第一时间访问已存的最新静态资源。...3.6.1 常规的资源定位思维 HTML是Web站点的入口,其他所有类型的静态资源均需要直接或间接地被HTML文档引用才可以被加载。...浏览器先访问HTML文档,根据其引用静态资源的地址、先后顺序依次进行加载。也就是说,浏览器必须通过HTML文档才可以知道Web站点需要哪些静态资源。

    1.2K20

    Nuxt3 实战 (一):初始化项目

    服务端渲染(SSR)和静态站点生成(SSG):Nuxt3 支持服务端渲染和静态站点生成,这有助于解决单页应用(SPA)中的 SEO 问题,提高页面加载速度,从而改善用户体验。...性能优化:Nuxt3 通过使用最新的 Web 技术和优化技巧,提供了更好的性能和更快的加载速度。无论是服务端渲染还是静态站点生成,Nuxt3 都能帮助开发者提高应用的性能表现。...content // 为你的应用创建一个基于文件的内容管理系统(CMS)。 layouts // Nuxt 提供了一个布局框架,用于将常见的 UI 模式提取为可重用的布局。...node_modules // 包管理器会将项目的依赖存储在 node_modules/ 目录中。 pages // Nuxt 提供了基于文件的路由功能,用于在你的 Web 应用中创建路由。...public // 用于提供网站的静态资源。 server // 用于在应用程序中注册API和服务器处理程序。 utils // 在整个应用程序中自动导入你的工具函数。

    58020

    用vuepress2搭建自己的github网站

    二、将代码推到github上最终我们是要部署到github上,所以直接在github上新建一个自己的项目仓库就好了三、用 GitHub Actions 部署到 GitHub Pages具体的各个站点和CI...里将部署站点的基础路径 base 设置为仓库名就可以了,注意前后要加/,示例:base:"/REPO/"。...项目里本地引用的图片这类静态资源尽量都用相对路径,vuepress打包的时候会根据 base 自动处理。...base(部署站点的基础路径) 这个参数你根据名字也能看出来最后是针对部署到服务器上用的,所以本地直接打包yarn build出来的文件用一些第三方的插件如:serve直接运行可能会出错,因为base没生效...not defined,vue3的官方文档上也有介绍: Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动3. markdown中使用vue组件v2版本中像

    39610

    Next.js基础教程:入门与实战

    一、Next.js简介与安装(一)Next.js的概念Next.js是一个流行的React框架,用于构建服务器 - 渲染(SSR)和静态网站生成(SSG)的现代Web应用程序。...静态网站生成(SSG):可以根据数据预渲染页面为静态HTML文件,适合内容变更不频繁的页面,提供最佳的加载性能。基于页面的路由系统:简洁直观,路由基于文件系统,使得新增页面和管理页面路由变得容易。...内置数据获取功能:方便在服务器端获取数据并传递给组件进行渲染。(三)安装步骤安装Node.js首先访问Node.js官方网站,下载适合你操作系统的安装包。...在Netlify的项目设置中,指定构建命令(对于Next.js项目一般为“next build && next start”),然后启动部署过程。...总结通过以上的入门和实战内容,我们可以初步掌握Next.js这个强大的框架,从而构建出高质量的现代Web应用。在实际项目中,还可以不断探索更多的功能和最佳实践。

    21500

    用vuepress2搭建自己的github网站

    二、将代码推到github上 最终我们是要部署到github上,所以直接在github上新建一个自己的项目仓库就好了 三、用 GitHub Actions 部署到 GitHub Pages 具体的各个站点和...里将部署站点的基础路径 base 设置为仓库名就可以了,注意前后要加/,示例:base:"/REPO/"。...项目里本地引用的图片这类静态资源尽量都用相对路径,vuepress打包的时候会根据 base 自动处理。...base(部署站点的基础路径) 这个参数你根据名字也能看出来最后是针对部署到服务器上用的,所以本地直接打包yarn build出来的文件用一些第三方的插件如:serve直接运行可能会出错,因为base没生效...is not defined,vue3的官方文档上也有介绍: Vite 是一个 web 开发构建工具,由于其原生 ES 模块导入方式,可以实现闪电般的冷服务器启动 3. markdown中使用vue组件

    41740

    Serverless 开发实战之Nodejs

    怎样借助工具,更快更好的部署自己的 Serverless 应用? 本次课程将带你深入了解这些Serverless的最佳实战应用。...2、Serverless 的典型场景 3、深入理解 Serverless Component 4、为你的静态页面加上后端:搭建express框架 & 三分钟快速定制你的新冠病毒疫情信息查询网页 1、为什么...EF客户痛点: 原有业务基于服务器搭建部署,每⽉投⼊的维护成本较⾼,且公司逐渐倾向于把运维⼈⼒释放,加⼤开发的投⼊。...⼒,⽀持开发者通过 Serverless Components 构建、组合并部署你的 Serverless 应⽤。...[zt7hp9xuc5.png] 4、为你的静态页面加上后端:搭建express框架 &三分钟快速定制你的新冠病毒疫情信息查询网页 [1fds1yw6ra.png] 课程源码相关地址: 官网 https

    1.5K30
    领券