{"componentChunkName":"component---src-templates-best-practice-detail-tsx","path":"/best-practice/2019-12-4-Quickly-build-personal-blog","result":{"data":{"currentBlog":{"id":"74a25989-4611-5393-85ef-698f2c988635","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/20191226/1577353111488-website.png","authors":["liujiang"],"categories":["best-practice"],"date":"2019-12-04T00:00:00.000Z","title":"Hexo + Serverless Framework，简单三步搭建你的个人博客","description":"简单三步，即可通过 Serverless Website 组件快速构建一个 Serverless Hexo 站点。","authorslink":["https://github.com/jiangliu5267"],"translators":null,"translatorslink":null,"tags":["Serverless","Hexo"],"keywords":"Hexo Serverless,Serverless Website,Serverless Hexo 站点","outdated":true},"wordCount":{"words":146,"sentences":34,"paragraphs":34},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2019-12-4-Quickly-build-personal-blog.md","fields":{"slug":"/best-practice/2019-12-4-Quickly-build-personal-blog/","keywords":["nodejs","serverless","website","website 组件","无服务器","hexo","serverless","Serverless","yml","Hexo","website","tencent"]},"html":"

很多人都想拥有自己的个人博客，还得看起来漂亮、酷酷的。尤其对开发者来说，不仅可以分享技术（装）心得（逼），面试的时候还能成为加分。这里介绍两款好用的神器，不用忙前（前端）忙后（后端），简单3min即可搞定，本文免费分享给大家。

\n
\n

PS：不会写代码？没有备案的域名？没有服务器？在这里，这些都不是事儿！

\n
\n

工具介绍

\n\n

使用 Serverless Framework 部署一个 Hexo 网站只需三步：：安装与初始化 → 配置 yml 文件 → 部署

\n

安装与初始化

\n

简单三步，即可通过 Serverless Website 组件快速构建一个 Serverless Hexo 站点。

\n

首先确保系统包含以下环境：

\n\n

如未安装上述应用程序，可以参考安装说明。

\n

1. 安装 Serverless Framework

\n
$ npm install -g serverless
\n

2. 安装 Hexo

\n
$ npm install -g hexo-cli
\n

3. 初始化项目

\n
$ hexo init hexo   # 生成hexo目录\n$ cd hexo\n$ npm install
\n

初始化完成后，hexo 文件夹的目录如下：

\n
.\n├── _config.yml\n├── package.json\n├── scaffolds\n├── source\n|   ├── _drafts\n|   └── _posts\n└── themes
\n

4. 生成本地博客页面

\n
hexo g   # generate
\n

可以通过 hexo g 命令生成静态页面，如果希望在本地查看效果，也可以运行下列命令，通过浏览器访问 http://localhost:4000 查看页面效果。

\n
hexo s   # server
\n

配置 yml 文件

\n

项目目录下，创建 serverless.yml 文件

\n
cd.> serverless.yml
\n

将以下内容写入上述的 yml 文件里：

\n\n \n 复制代码\n \n \n
# serverless.yml\n\ncomponent: website # (必填) 引用 component 的名称，当前用到的是 tencent-website 组件\nname: hexodemo # (必填) 该 website 组件创建的实例名称\norg: test # (可选) 用于记录组织信息，默认值为您的腾讯云账号 APPID\napp: websiteApp # (可选) 该 website 应用名称\nstage: dev # (可选) 用于区分环境信息，默认值是 dev\n\ninputs:\n  src:\n    src: ./public # Upload static files generated by HEXO\n    index: index.html\n    # dist: ./dist\n    # hook: npm run build\n    # websitePath: ./\n  region: ap-guangzhou\n  bucketName: my-bucket\n  protocol: https
\n

配置完成后，文件目录如下：

\n
.\n├── .serverless\n└── hexo\n    ├── public\n    ├── ...\n    ├── serverless.yml\n    ├── ...\n    └── source
\n

部署

\n

通过sls deploy命令进行部署，并可以添加--debug参数查看部署过程中的信息。

\n

如您的账号未登陆或注册腾讯云，您可以直接通过微信扫描命令行中的二维码进行授权登陆和注册。

\n
$ sls deploy\n\nserverless ⚡ framework\nAction: "deploy" - Stage: "dev" - App: "websiteApp" - Instance: "hexodemo"\n\nregion:  ap-guangzhou\nwebsite: https://my-bucket-1258834142.cos-website.ap-guangzhou.myqcloud.com\n\n\n25s › hexodemo › Success
\n

访问命令行输出的 website url，即可查看属于自己的 Serverless Hexo 站点。

\n

\"image\"

\n

如果需要更新 hexo 站点中的文章，只需要在本地重新运行 hexo g 更新本地页面，再运行 sls 就可以直接更新到 Hexo 网站啦~

\n\n
\n
\n
\n
\n

传送门：

\n\n
\n

欢迎访问：Serverless 中文网，您可以在 最佳实践 里体验更多关于 Serverless 应用的开发！

","tableOfContents":""},"previousBlog":{"id":"70178fa6-74b6-5606-9467-7c4fa830b240","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/20191226/1577353101878-vue.js.png","authors":["yugasun"],"categories":["best-practice"],"date":"2019-12-05T00:00:00.000Z","title":"基于 Serverless Component 全栈解决方案","description":"本文将介绍如何借助 Serverless Component 快速开发全栈 Web 应用。","authorslink":["https://github.com/yugasun"],"translators":null,"translatorslink":null,"tags":["Serverless","全栈应用"],"keywords":"Serverless Component,全栈 Web 应用,全栈解决方案","outdated":null},"wordCount":{"words":278,"sentences":57,"paragraphs":57},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2019-12-5-Full-stack-solution-based-on-serverless-component.md","fields":{"slug":"/best-practice/2019-12-5-Full-stack-solution-based-on-serverless-component/","keywords":["serverless","spa","vue","vuejs","website","website 组件","云函数","serverless","express","tencent","res"]}},"nextBlog":{"id":"1a6791e1-0295-546d-ac0c-c19730a4bac2","frontmatter":{"thumbnail":"https://img.serverlesscloud.cn/2020115/1579074115778-1577347088399-website_fang.png","authors":["liujiang"],"categories":["best-practice"],"date":"2019-12-03T00:00:00.000Z","title":"通过 SCF Component 轻松构建 REST API，再也不用熬夜加班了","description":"本教程将分享如何通过 Serverless SCF Component 、云函数 SCF 及 API 网关组件，快速构建一个 REST API 并实现 GET/PUT 操作。","authorslink":["https://github.com/jiangliu5267"],"translators":null,"translatorslink":null,"tags":["Serverless","Restful"],"keywords":"SCF Component,REST API,构建 REST API,Serverless SCF Component","outdated":null},"wordCount":{"words":99,"sentences":25,"paragraphs":25},"fileAbsolutePath":"/opt/build/repo/content/best-practice/2019-12-3-Easy-to-build-REST-API.md","fields":{"slug":"/best-practice/2019-12-3-Easy-to-build-REST-API/","keywords":["go","python","serverless","spa","serverless","action","student","teacher","Serverless","event"]}}},"pageContext":{"isCreatedByStatefulCreatePages":false,"blogId":"74a25989-4611-5393-85ef-698f2c988635","previousBlogId":"70178fa6-74b6-5606-9467-7c4fa830b240","nextBlogId":"1a6791e1-0295-546d-ac0c-c19730a4bac2"}}}