关于git:同为博客不同风格-Hexo另类搭建

40次阅读

共计 2995 个字符,预计需要花费 8 分钟才能阅读完成。

简介:通过阿里云云开发平台疾速由 Hexo 创立赛博朋克格调的博客。

一、通过云开发平台疾速创立初始化利用

1. 创立相干利用模版请参考链接:Hexo 博客框架—轻量、一令部署

2. 实现创立后就能够在 github 中查看到新增的 Hexo 仓库

二、本地编写《赛博朋克格调》集体博客

1. 将利用模版克隆到本地
  • 首先假设你曾经装置了 Git、node,没有装置请移步 node 官网进行装置。克隆我的项目:

git clone + 我的项目地址

  • 进入我的项目文件

cd hexo

  • 切换到 feature/1.0.0 分支上

git checkout feature/1.0.0

  • 应用一下命令全局装置 Hexo CLI:

npm install -g hexo-cli

  • 进阶装置和应用

对于相熟 npm 的进阶用户,能够仅部分装置 hexo 包。

npm install hexo

  • 装置依赖包

npm install

  • 启动服务

npm run server

这里关上浏览器 4000 端口,并呈现默认页面。

2. 案例成果预览

3. 更换为 lcarus 主题

更换主题也非常简单,咱们查看 Icarus 文档。更换主题次要有两种形式,一种是应用 npm 装置主题的形式,另一种是下载源码放到 theme 文件夹的形式。简略起见,咱们先采纳 npm 的形式:

$ yarn add hexo-theme-icarus

应用 hexo 命令批改主题为 lcarus:

$ npx hexo config theme icarus

启动服务器,很可怜,报错了:

提醒很分明,短少依赖,咱们增加依赖:

$ yarn add bulma-stylus@0.8.0 hexo-renderer-inferno@^0.1.3

再次尝试构建并启动,胜利呈现 Icarus 主题了:

急不可待尝试赛博朋克格调主题了,非常简单,在 _config.icarus.yml 文件中批改:

Icarus theme variant, can be “default” or “cyberpunk”

variant: cyberpunk

再次尝试构建并启动,赛博朋克格调主题呈现:

具体代码详见这个 Commit。

4. 自定义配置

上面咱们批改配置文件 _config.yml 和 _config.icarus.yml,配置网站相干信息。

次要包含 logo、favicon、navbar 的 menu 和 links、footer、donates(资助信息,正文掉没用的领取渠道)、widgets。

这里具体说一下 widgets,widgets 就是页面上的各个区域的挂件,能够通过配置灵便扭转其地位和具体信息,依据爱好决定布局采纳 3 栏还是 2 栏布局。

  • profile widgets:这块是用户信息模块,把相干信息改成你本人的就好啦,上面有一个 social_links,也能够自定义配置,如果没有 Twitter 和 FaceBook,能够把相干信息正文掉,也能够增加其余链接,留神图标是基于 fontawesome 的。
  • subscribe_email、adsense 都用不上,能够删掉

具体批改细节能够参考这个 Commit。

批改完的成果如下:

5. 源码形式应用 lcarus 主题

方才说到应用 Icarus 主题有两种形式,npm 包的形式尽管简便,然而如果想对 Icarus 主题有更深的配置就不太好弄了,尤其是过来 Icarus 始终都采纳的是源码模式,很多 Issue 的解决方案都是批改源码的,而对应的 npm 包的形式则很少提及,所以咱们也改为应用源码形式,不便后续配置。

首先删掉 hexo-theme-icarus 依赖,在 Icarus 仓库下载代码,解压后拷贝到 theme 文件夹中。

详见这个 Commit。

6. 配置样例文章

上面咱们删掉默认的 Hello World 文章,创立一个本人的文章。

留神头部配置文件相干信息,在新版 Icarus 中头图须要额定配置 cover 选项,如下:

title: “【译】下一代前端构建工具 ViteJS 中英双语字幕 ”

date: 2021/03/08 11:12:25

categories:

  • Front-End
  • Tools

tags:

  • Vite
  • GitHub
  • Translation

toc: true # 是否显示目录

thumbnail: ‘/images/vitet.png’ # 缩略图

cover: ‘/images/vitet.png’ # 头图

详见这个 Commit。

7. 文章内容过长怎么办

首页应该展现更多的文章,如果文章过长,用户下滑就只会看到同一篇文章,咱们如果只想让用户看一部分内容怎么办呢?非常简单,在 md 文件中增加 <!– more –> 即可,增加完之后,就会呈现“浏览更多”的按钮,首页就能看到多篇文章了。

代码详见这个 Commit。

8. 怎么样让文章两栏展现

目前文章页依然和首页一样,是三栏布局,为了无效利用空间,心愿文章页可能两栏布局。此时咱们须要在 Icarus 源码文件夹增加 _config.post.yml 文件,并配置成两栏布局:

widgets:

# Profile widget configurations

-

    # Where should the widget be placed, left sidebar or right sidebar

    position: right

    type: toc

    # Whether to show the index of each heading

    index: true

    # Whether to collapse sub-headings when they are out-of-view

    collapsed: false

    # Maximum level of headings to show (1-6)

    depth: 3

来看看成果:

三、云端一键部署上线利用

1. 上传代码

git add .

git commit -m ‘ 增加你的正文 ’

git push

2. 在日常环境部署

一键进行利用部署。在利用详情页面点击日常环境的「部署」按钮进行一键部署,部署状态变成绿色已部署当前能够点击拜访部署网站查看成果。

3. 配置自定义域名在线上环境上线

配置线上环境自定义域名。在性能开发验证实现后要在线上环境进行部署,在线上环境的「部署配置」-「自定义域名」中填写本人的域名。例如咱们增加一个二级域名 company.workbench.fun 来绑定咱们部署的前端利用。而后复制自定义域名下方的 API 网关地址对增加的二级域名进行 CNAME 配置。

配置 CNAME 地址。复制好 API 网关域名地址后,来到你本人的域名治理平台(此示例中的域名治理是阿里云的域名治理控制台,请去本人的域名控制台操作)。增加记录的「记录类型」抉择「CNAME」,在「主机记录」中输出你要创立的二级域名,这里咱们输出「company」,在「记录值」中粘贴咱们之前复制的 API 网关域名地址,「TTL」保留默认值或者设置一个你认为适合的值即可。

在线上环境部署上线。回到云开发平台的利用详情页面,依照部署的操作,点击线上环境的「部署按钮」,部署实现当前就在你自定义的域名进行了上线。CNAME 失效之后,咱们输出 company.workbench.fun(示例网址)能够关上部署的页面。至此,如何部署一个利用到线上环境,如何绑定本人的域名来拜访一个线上的利用就实现了,连忙部署本人的利用到线上环境,用本人的域名玩起来吧;)

一键创立 Hexo 利用模版链接:https://workbench.aliyun.com/…

参考文献:https://juejin.cn/post/693885…

原文链接
本文为阿里云原创内容,未经容许不得转载。

正文完
 0