HexoGithubPages部署个人博客

　　1。缘起
　　之前还在学校里的时候，在ACM集训队中偶尔写过一些题解，发布在CSDN的博客上，后来CSDN改来改去，以及各种各样的原因，不想在第三方的博客平台发布了，就有了自己搭建一个个人博客站点的想法。一开始设想是购买个服务器自己搭Wordpress的，后来看了几篇文章以后发现GithubPages之类的静态页面就可以满足我基本的需求了，使用hexo之类的静态站点生成工具也可以很方便地以后迁移到自己的服务器上。
　　所以最后的方案就确定是HexoGithubPages了
　　2。准备2。1Hexo的准备
　　快速、简洁且高效的博客框架hexo。io
　　Hexo是基于Node。js的一个快速高效的博客框架，支持从markdown生成页面，同时有丰富的第三方插件和主题支持。2。2。1依赖安装
　　前置要求Git、NodeJs
　　这两个的安装就不在这里多做赘述了，直接参考官网或者其他博客即可。
　　NodeJs官网
　　Git官网2。1。2Hexo安装
　　安装完上述依赖以后，直接执行下面的命令即可安装Hexonpminstallghexocli2。1。3初始化站点
　　安装Hexo完成后，执行下列命令，Hexo将会在指定文件夹中新建所需要的文件。hexoinitfoldercdfoldernpminstall
　　新建完成后，指定文件夹的目录如下：。config。ymlpackage。jsonscaffoldssourcedraftspoststhemes
　　需要关心以下几个文件文件夹config。yml
　　网站的配置信息，在此配置大部分的参数。scaffolds
　　模版文件夹。当您新建文章时，Hexo会根据scaffold来建立文件。
　　Hexo的模板是指在新建的文章文件中默认填充的内容。例如，如果修改scaffoldpost。md中的Frontmatter内容，那么每次新建一篇文章时都会包含这个修改。source
　　资源文件夹是存放用户资源的地方。除post文件夹之外，开头命名为（下划线）的文件文件夹和隐藏的文件将会被忽略。Markdown和HTML文件会被解析并放到public文件夹，而其他文件会被拷贝过去。theme
　　主题文件夹。Hexo会根据主题来生成静态页面。
　　现在，在文件夹下执行hexoss是server的缩写
　　然后打开http：localhost：4000应该可以看到默认的站点页面了如下图
　　！〔〕（https：i。loli。net20201225dAVIzlkuHpa7Lvq。png）
　　我这个是使用了next的主题，默认和这个会有所不同，只要能正常看到页面，就算正常。
　　至此一个Hexo的本地站点就已经搭建完成了，接下来就是要配置GithubPages其他静态页面容器用于部署博客了2。1。4站点基本信息配置
　　站点基本信息配置，在站点的config。yml中修改基本信息Sitetitle：ShufusGraffiti站点名称subtitle：子标题description：RecodingReminding描述keywords：author：作者language：zhHans语言timezone：AsiaShanghai时区2。2GithubPages的准备
　　这里以GithubPages为例，但是使用Coding或者Gitee的类似服务也是类似的流程2。2。1注册账号
　　注册一个github账号，过程略2。2。2创建一个博客仓库
　　新建仓库，如果要想直接用用户名。github。io访问的话，仓库名就要是用户名。github。io但是考虑到未来可能会迁移到个人服务器上，所以我自己还是用子目录的形式进行访问的即随意填写仓库名使用用户名。github。io仓库名的形式访问如下图
　　！〔〕（https：i。loli。net20201225IrvmR2Bw8lOHKVs。png）2。2。3启用GithubPages服务
　　创建完成以后进入项目的SettingGitHubPages启用Pages分支选main，目录选root即可。
　　在项目中创建一个index。html内容填写！DOCTYPEhtmlhtmlheadmetacharsetutf8titlehello，worldtitleheadbodyh1HelloWorldh1bodyhtml
　　保存提交后，再直接通过GitHubPages处显示的地址打开，就应该能看到HelloWorld了
　　至此GithubPages的准备也已经完成了，接下来就是将本地生成的静态站点推送到这个容器仓库中了。3。部署
　　这边先介绍直接使用插件将本地生成的站点整体推送到远端的方案，后续直接使用语雀作为编辑端，通过WebHook触发自动的同步和打包动作，完成发布的相关的内容下一篇再写吧3。1。部署插件的安装
　　hexodeployergit是一个一键将Hexo生成的站点部署到Github的插件安装命令如下npminstallhexodeployergitsave
　　然后在config。yml中配置git仓库的相关信息DeploymentDocs：https：hexo。iodocsonecommanddeploymentdeploy：type：gitrepo：gitgithub。com：仓库地址branch：main3。2。SSHkey配置
　　本地生成一对SSHkeysshkeygentrsaC备注
　　然后将公钥放到个人页面SettingSSHandGPGkeys中3。3。Hexo配置修改
　　config。yml中url：https：tofunothere。github。ioblog修改为githubpages的地址，root：blog如果是使用子目录的形式，需要指定子目录3。4。发布
　　在博客目录下执行hexogdg是generate的缩写d是deploy的缩写
　　好了，现在就已经将本地静态站点发布到GitHub上了，通过GitHubPages的链接应该可以正常访问了
　　4。主题配置4。1Next的安装
　　可以直接通过git将目录clone到themenext文件夹下，命令如下cdhexo站点目录gitclonehttps：github。comthemenexthexothemenextthemesnext
　　也可以下载zip包，然后解压文件到theme文件夹下，注意要将文件夹名改为next
　　在站点的config。yml配置中，修改theme：为next即可启用next主题4。2相关插件安装及配置4。2。1。配置主题
　　修改主题，配置侧片菜单，详情页中的导航目录主题SchemeSchemeSettingsSchemesscheme：Musescheme：Mistscheme：Piscesscheme：GeminiDarkModedarkmode：false侧边栏sidebar：SidebarPosition。position：leftposition：rightManualdefinethesidebarwidth。Ifcommented，willbedefaultfor：MuseMist：320PiscesGemini：240width：300SidebarDisplay（onlyforMuseMist），availablevalues：postexpandonpostsautomatically。Default。alwaysexpandforallpagesautomatically。hideexpandonlywhenclickonthesidebartoggleicon。removetotallyremovesidebarincludingsidebartoggle。display：postSidebarpaddinginpixels。padding：18Sidebaroffsetfromtopmenubarinpixels（onlyforPiscesGemini）。offset：12Enablesidebaronnarrowview（onlyforMuseMist）。onmobile：false头像SidebarAvataravatar：Replacethedefaultimageandsettheurlhere。url：imagesavatar。gifIftrue，theavatarwillbedispalyedincircle。rounded：trueIftrue，theavatarwillberotatedwiththecursor。rotated：false文章目录TableofContentsintheSidebarFrontmattervariable（unsupportwrapexpandall）。toc：enable：trueAutomaticallyaddlistnumbertotoc。number：falseIftrue，allwordswillplacedonnextlinesifheaderwidthlongerthensidebarwidth。wrap：falseIftrue，alllevelofTOCinapostwillbedisplayed，ratherthantheactivatedpartofit。expandall：falseMaximumheadingdepthofgeneratedtoc。maxdepth：64。2。2。配置菜单
　　主题的config。yml配置中修改下面的内容
　　依次为主页、分类、标签、归档、关于页面menu：home：fafahomecategories：categoriesfafathtags：tagsfafatagsarchives：archivesfafaarchiveabout：aboutfafauser
　　但是仅仅取消相关页面的注释是不够的，需要创建对应的页面hexonewpagecategorieshexonewpagetagshexonewpagearchiveshexonewpageabout
　　然后进入source目录下，找到对应的文件夹，修改其中的index。md内容如下title：关于date：2020121519：26：17type：abouttype对应上面的目录类型comments：false关闭评论
　　4。2。3。配置搜索
　　安装本地搜索插件npminstallhexogeneratorsearchdbsave
　　编辑Hexo的config。yml添加如下内容search：path：search。xmlfield：postformat：htmllimit：10000
　　修改Next的config。yml启用搜索Localsearchlocalsearch：enable：true4。2。4配置字数统计和阅读时长估计
　　修改Next的config。yml启用字数统计和阅读时长估计PostwordcountdisplaysettingsDependencies：https：github。comthemenexthexosymbolscounttimesymbolscounttime：separatedmeta：trueitemtextpost：trueitemtexttotal：falseawl：4wpm：275suffix：mins。
　　修改Hexo的config。yml启用全站的字数统计和时长估计symbolscounttime：symbols：truetime：truetotalsymbols：truetotaltime：trueexcludecodeblock：false4。2。5配置访问统计
　　修改Next的config。yml启用访问统计ShowViewsVisitorsofthewebsitepagewithbusuanzi。Getmoreinformationonhttp：ibruce。info20150404busuanzibusuanzicount：enable：truetotalvisitors：truetotalvisitorsicon：fafausertotalviews：truetotalviewsicon：fafaeyepostviews：truepostviewsicon：fafaeye