网站内容建设是什么,泰州网站建设解决方案,素材网站推广方案,wordpress id清0hexo支持很多部署方案#xff0c;最直接的就是部署在GitHub Pages服务上#xff0c;国内gitee、coding等代码托管平台也都支持静态网站服务#xff0c;而且免费。
但是GitHub在国内访问不太稳定#xff0c;国内的代码托管平台资源和服务也不太稳定#xff0c;后来想了想最直接的就是部署在GitHub Pages服务上国内gitee、coding等代码托管平台也都支持静态网站服务而且免费。
但是GitHub在国内访问不太稳定国内的代码托管平台资源和服务也不太稳定后来想了想干脆通过云存储部署吧。
云存储有很多选择而且新用户往往都有很多优惠包甚至免费额度有很多人都选择七牛云做图床就是七牛云的免费额度真是良心小站基本够用。看完几家国内的云服务商计费方式后最终选择了腾讯云cos对象存储服务。一是背靠大厂服务相对稳定二是价格尚可虽不免费但可接受。而且像阿里云、腾讯云这些大服务商很多一条龙服务比如网站备案、证书等等在一个控制台里就全操作了不用跳来跳去比较省心。 部署方案
运行环境腾讯云COS CDN部署方式GitHub Actions
GitHub Actions
使用 GitHub Actions 将 Hexo 博客部署到腾讯云 COS 上可以将博客静态文件存储在腾讯云上实现静态文件的分发和加速提高博客访问速度和用户体验。下面是具体的步骤。
1. 创建腾讯云 COS 存储桶
首先需要在腾讯云控制台创建一个存储桶。登录腾讯云控制台进入 COS 服务点击“新建存储桶”按照提示完成创建存储桶的操作。
2. 申请腾讯云访问密钥
在腾讯云控制台中点击右上角的账号头像选择“访问管理”进入访问管理控制台。在左侧菜单栏中选择“访问密钥”然后点击“新建密钥”按钮按照提示完成申请访问密钥的操作。
3. 在 GitHub 上配置 Secrets
在 GitHub 仓库中点击“Settings”按钮进入仓库设置页面选择“Secrets”选项卡。在 Secrets 页面中点击“New repository secret”按钮创建两个 Secrets
TENCENT_CLOUD_SECRET_ID腾讯云访问密钥的 Secret ID。TENCENT_CLOUD_SECRET_KEY腾讯云访问密钥的 Secret Key。COS_BUCKET腾讯云COS存储桶。COS_REGION腾讯云COS存储区域。
将刚刚申请的腾讯云访问密钥的 Secret ID 和 Secret Key 分别填写到上面对应 Secrets 中存储桶和区域也要填上。
4. workflows
可以使用腾讯云cos action进行部署在仓库下新建.github/workflows/cos-deploy.yml文件然后添加以下内容就可以将hexo生成的页面部署到cos
env:TZ: Asia/Shanghai # 时区on:push:branches:- mainjobs:build:runs-on: ubuntu-latestname: A job to deploy blog.steps:- name: Checkoutuses: actions/checkoutv3with:submodules: true # Checkout private submodules(themes or something else).# Caching dependencies to speed up workflows. (GitHub will remove any cache entries that have not been accessed in over 7 days.)- name: Cache node modulesuses: actions/cachev3id: cachewith:path: node_moduleskey: ${{ runner.os }}-node-${{ hashFiles(**/package-lock.json) }}restore-keys: |${{ runner.os }}-node-- name: Install Dependenciesif: steps.cache.outputs.cache-hit ! truerun: npm ci# Caching public- name: cache publicid: cache-publicuses: actions/cachev3with:path: |publicdb.jsonkey: ${{ runner.os }}-public-${{ hashFiles(**/db.json) }}restore-keys: |${{ runner.os }}-public-# Hexo generate- name: Hexo generateid: generaterun: |npx hexo generate# Deploy hexo blog website.- name: Deployid: deployuses: TencentCloud/cos-actionv1with:secret_id: ${{ secrets.TENCENT_CLOUD_SECRET_ID }}secret_key: ${{ secrets.TENCENT_CLOUD_SECRET_KEY }}cos_bucket: ${{ secrets.COS_BUCKET }}cos_region: ${{ secrets.COS_REGION }}local_path: publicremote_path: /# Optional Set to true for cleaning files on COS path which are not existed in local path. Default is false.# clean: true# Optional Set to true for using accelerate domain to upload files. Default is false.# accelerate: true# Use the output from the deploy step(use for test action)- name: Get the outputrun: |echo ${{ steps.deploy.outputs.notify }}Workflow 文件中包含一个 Job名为 build-and-deploy这个 Job 包含四个步骤
Checkout使用 actions/checkout 动作从 GitHub 仓库中检出代码。Cache node modules使用 actions/cache 动作安装 Node.js 运行环境和hexo相关依赖。cache public缓存hexo生成的静态文件。Hexo generate使用 Hexo 生成静态文件。Deploy使用腾讯云官方提供的 TencentCloud/cos-action 动作将生成的静态文件部署到 COS 存储桶中。
腾讯云也提供了非常好用的cli工具只需几条命令就可以上传文件到cos所以也可以使用cli工具部署
# workflow
name: Blogon:push:branches:- masterjobs:deploy:name: Deploy Blogruns-on: ubuntu-latestenv:TZ: Asia/Shanghaisteps:# check it to your workflow can access it# from: https://github.com/actions/checkout- name: Checkout Repository master branchuses: actions/checkoutv2with: ref: mastersubmodules: true# from: https://github.com/actions/setup-node- name: Setup Node.jsuses: actions/setup-nodemasterwith: node-version: 14.x- name: Yarn Install Cacheuses: c-hive/gha-yarn-cachev1- name: Install Dependenciesrun: yarn install## generate files- name: Generate Hexo Site Public Files Create Files for Blog Assetsrun: yarn build## deploy to tencent cos- name: Deploy to Tencent COSenv:SECRET_ID: ${{ secrets.TENCENT_CLOUD_SECRET_ID }}SECRET_KEY: ${{ secrets.TENCENT_CLOUD_SECRET_KEY }}BUCKET: ${{ secrets.COS_BUCKET }}REGION: ${{ secrets.COS_REGION }}run: |sudo pip install coscmdcoscmd config -a ${SECRET_ID} -s ${SECRET_KEY} -b ${BUCKET} -r ${REGION}coscmd upload -rs --delete ./public/ / -f命令 coscmd upload -rs --delete ./public/ / -f 的意思是比较当前 COS 存储桶内的文件如果发生变更则更新如果存储桶中存在但 public 目录中不存在则删除对应的文件coscmd 的具体使用方法可以参考腾讯云官方文档。
5. 将 workflow 文件提交到 GitHub 仓库
将刚刚创建的 workflow 文件提交到 GitHub 仓库中GitHub Actions 会自动检测并执行该 Workflow。可以通过在 GitHub 仓库中的“Actions”选项卡查看 Workflow 的执行情况。
至此使用 GitHub Actions 将 Hexo 博客部署到腾讯云 COS 上的步骤已经完成。每次提交代码后GitHub Actions 会自动构建和部署静态文件到腾讯云上无需手动操作非常方便。
开启cos静态网站功能
将网站文件上传到 COS 还不够需要开启 COS 的静态网站功能打开存储桶 - 基础配置 - 静态网站按照下图所示进行配置 这时就可以通过图中的访问节点提供的域名来访问网站了当然也可以绑定自定义域名前提是域名已经备案。
cdn加速
创建域名
如果域名有备案的话同时可以使用腾讯云 CDN 加速 COS 静态网站配置十分简单在 CDN 页面中创建一个域名按下图所示进行配置 配置缓存
缓存配置十分重要由于站点是静态站点网站的内容变化比较少为了降低 CDN 的回源请求一定要配置节点缓存策略可以参考我的配置如下其中浏览器缓存可以按需配置 注意这里不用担心节点缓存时间配置的过长会导致页面无法更新后面我会讲如何配置缓存的自动刷新。
关于 CDN 配置的更多细节就不讲了都很简单一看就懂。
cdn节点缓存自动刷新
官方方案
由于上一步中配置了 CDN 节点的缓存策略请求只要能够命中缓存就不会进行回源请求了这会导致我们的页面更新不能及时的展现给用户因此需要考虑如何进行 CDN 节点的缓存自动刷新。
腾讯云官方给我们提供了一个解决方案可以在 COS 存储桶的函数计算 -CDN 缓存刷新函数中配置一个函数可参考下图所示配置 但这个方案存在一个问题由于我们的静态网站有默认索引页面 index.html而官方提供的这个函数只会刷新对应的文件的 URL而不会刷新索引 URL例如 https://blog.boringhex.top/index.html 这个文件通常我们的请求是 https://blog.boringhex.top/因此官方的方案针对于静态网站来说不算完美。
优化方案
可以通过简单修改官方的函数来解决这个问题点击刚刚创建的 CDN缓存刷新函数列表中的函数名称可以跳转的函数的编辑页面
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ar7OSUPJ-1677832374902)(https://imgs.boringhex.top/blog/20230221154837.png)]
将 index.js 文件内容替换为下面的代码最后点击右上角的 “部署” 按钮即可
use strictconst CosSdk require(cos-nodejs-sdk-v5)
const CdnSdk require(./common/CdnSdk)
const CdnRefreshTask require(./common/CdnRefreshTask)
const {getParams,getObjectUrl,logger,getLogSummary
} require(./common/utils)exports.main_handler async (event, context, callback) {/*** parse param from event and process.env*/const { objects, cdnHosts, secretId, secretKey, token } getParams(event)logger({title: param is parsed success, param as follow: ,data: { objects, cdnHosts, event }})/*** init cos instance*/if (!secretId || !secretKey || !token) {throw new Error(secretId, secretKey or token is missing)}const cdnSdkInstance new CdnSdk({ secretId, secretKey, token })const cosInstance new CosSdk({SecretId: secretId,SecretKey: secretKey,XCosSecurityToken: token})const taskList objects.map(({ bucket, region, key }) {const purgeUrls [];// 主要变更内容在这个位置cdnHosts.forEach(host {const tempUrl getObjectUrl({cosInstance,bucket,region,key,origin: ${/^(http\:\/\/|https\:\/\/)/.test(host) ? : https://}${host}});purgeUrls.push(tempUrl);// 如果以 /index.html 结尾则增加目录首页/// 例如 https://www.xxxx.com/index.html, 则增加 https://www.xxxx.com/if(tempUrl.lastIndexOf(/index.html) (tempUrl.length - 11)){purgeUrls.push(tempUrl.substr(0, tempUrl.length - 10))}});return new CdnRefreshTask({cdnSdkInstance,urls: purgeUrls})})const taskResults []for (const task of taskList) {const results await task.runPurgeTasks()taskResults.push(...results)}logger({title: cdn refresh full logs:,data: taskResults})const { status, messages } getLogSummary(taskResults)logger({messages: messages.map(item item.replace(/\,\ /g, \n))})if (status fail) {throw messages.join(; )} else {return messages.join(; )}
}
