搭建hexo博客静态框架教程及操作时踩的坑

    xiaoxiao2022-07-12  156

    网上有很多博客写了hexo的操作教程,但是都很生硬,我找了好几篇按照博客上写的一步一步操作,总是会遇到这样活那样的错误,导致最终卡主做不下去。 而且很多博客只是一味的堆积教程、步骤,只字不提过程中会报什么错,咋解决,导致我很苦恼。

    所以这篇文章将记录我按照别人的博客搭建hexo博客静态框架所遇到的问题以及解决方法。

    首先需要安装git和node.js,这是必须的,因为hexo是基于node的,而我们需要用git将网站托管到GitHub。安装这里不再多说。

    安装完成后,在你电脑的D盘或别的盘,新建个目录如blog,在你建的目录下右键打开git bash,执行 npm install -g hexo-cli,安装hexo客户端,执行命令后效果如下

    $ npm install -g hexo-cli C:\Users\yapeng\AppData\Roaming\npm\hexo -> C:\Users\yapeng\AppData\Roaming\npm\node_modules\hexo-cli\bin\hexo npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\hexo-cli\node_modules\fsevents): npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"}) + hexo-cli@1.1.0 updated 1 package in 34.207s

    然后执行 hexo init myblg,myblg是自定义的,会生成个目录

    $ hexo init myblg INFO Cloning hexo-starter to D:\blog\myblg Cloning into 'D:\blog\myblg'... remote: Enumerating objects: 3, done. remote: Counting objects: 100% (3/3), done. remote: Compressing objects: 100% (3/3), done. remote: Total 71 (delta 0), reused 0 (delta 0), pack-reused 68 Unpacking objects: 100% (71/71), done. Submodule 'themes/landscape' (https://github.com/hexojs/hexo-theme-landscape.git) registered for path 'themes/landscape' Cloning into 'D:/blog/myblg/themes/landscape'... remote: Enumerating objects: 1, done. remote: Counting objects: 100% (1/1), done. remote: Total 896 (delta 0), reused 0 (delta 0), pack-reused 895 Receiving objects: 100% (896/896), 2.55 MiB | 192.00 KiB/s, done. Resolving deltas: 100% (479/479), done. Submodule path 'themes/landscape': checked out '73a23c51f8487cfcd7c6deec96ccc7543960d350' INFO Install dependencies npm WARN deprecated core-js@1.2.7: core-js@<2.6.8 is no longer maintained. Please, upgrade to core-js@3 or at least to actual version of core-js@2. INFO Catch you later

    然后$ cd myblg/

    再然后执行$ npm install

    $ npm install npm notice created a lockfile as package-lock.json. You should commit this file. audited 4698 packages in 4.572s found 3 vulnerabilities (2 low, 1 moderate) run `npm audit fix` to fix them, or `npm audit` for details

    发现有提示,然后根据提示继续执行$ npm audit fix

    $ npm audit fix up to date in 3.725s fixed 0 of 3 vulnerabilities in 4698 scanned packages 2 vulnerabilities required manual review and could not be updated 1 package update for 1 vuln involved breaking changes (use `npm audit fix --force` to install breaking changes; or refer to `npm audit` for steps to fix these manually)

    继续根据提示$ npm audit fix --force

    $ npm audit fix --force npm WARN using --force I sure hope you know what you are doing. + hexo-renderer-marked@1.0.1 updated 2 packages in 5.736s fixed 1 of 3 vulnerabilities in 4698 scanned packages 2 vulnerabilities required manual review and could not be updated 1 package update for 1 vuln involved breaking changes (installed due to `--force` option)

    然后执行hexo generate或$ hexo g,生成静态博客

    $ hexo g INFO Start processing INFO Files loaded in 440 ms INFO Generated: index.html INFO Generated: archives/index.html INFO Generated: fancybox/blank.gif INFO Generated: fancybox/fancybox_loading.gif INFO Generated: fancybox/fancybox_overlay.png INFO Generated: fancybox/fancybox_sprite.png INFO Generated: fancybox/jquery.fancybox.css INFO Generated: fancybox/fancybox_loading@2x.gif INFO Generated: fancybox/fancybox_sprite@2x.png INFO Generated: archives/2019/index.html INFO Generated: archives/2019/05/index.html INFO Generated: fancybox/helpers/jquery.fancybox-buttons.css INFO Generated: css/fonts/fontawesome-webfont.eot INFO Generated: css/style.css INFO Generated: js/script.js INFO Generated: fancybox/jquery.fancybox.pack.js INFO Generated: fancybox/helpers/jquery.fancybox-media.js INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.js INFO Generated: fancybox/helpers/jquery.fancybox-buttons.js INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.css INFO Generated: fancybox/helpers/fancybox_buttons.png INFO Generated: css/fonts/fontawesome-webfont.woff INFO Generated: css/fonts/FontAwesome.otf INFO Generated: css/fonts/fontawesome-webfont.ttf INFO Generated: css/fonts/fontawesome-webfont.svg INFO Generated: 2019/05/23/hello-world/index.html INFO Generated: css/images/banner.jpg INFO Generated: fancybox/jquery.fancybox.js INFO 28 files generated in 928 ms

    然后执行$ hexo s,启动服务

    $ hexo server INFO Start processing INFO Hexo is running at http://localhost:4000 . Press Ctrl+C to stop.

    说明正常启动

    访问localhost:4000正常,可以看到hexo的默认页面

    我们要用github托管我们的网站,所以要在github注册账号,注册完后创建一个仓库,名字叫XXXX.github.io,其中XXXX就是你的GitHub的用户名,一定要这样。

    然后安装deployer-git,用来将hexo生成的文件推到GitHub

    执行npm install hexo-deployer-git --save

    $ npm install hexo-deployer-git --save npm WARN babel-eslint@10.0.1 requires a peer of eslint@>= 4.12.1 but none is installed. You must install peer dependencies yourself. + hexo-deployer-git@1.0.0 added 59 packages from 48 contributors and audited 6951 packages in 16.659s found 2 low severity vulnerabilities run `npm audit fix` to fix them, or `npm audit` for details

    意思是 babel-eslint@10.0.1需要 eslint@>= 4.12.1 ,但是没安装,需要手动安装,不用管。

    关键的一步,修改配置_config.yml文件,替换成你自己的github仓库地址,** 冒号后面一定要有空格!!!**

    记得后面有.git

    (这是我已经部署到GitHub后的,可能和你现在的不太一样)

    deploy: type: git repo: https://github.com/biggerboy/biggerboy.github.io.git branch: master

    先不管,继续执行hexo clean

    $ hexo clean INFO Deleted database. INFO Deleted public folder.

    继续hexo generate或hexo g生成静态博客系统

    $ hexo generate INFO Start processing INFO Files loaded in 491 ms INFO Generated: index.html INFO Generated: archives/index.html INFO Generated: fancybox/blank.gif INFO Generated: fancybox/fancybox_loading.gif INFO Generated: fancybox/jquery.fancybox.css INFO Generated: fancybox/fancybox_loading@2x.gif INFO Generated: fancybox/fancybox_overlay.png INFO Generated: fancybox/fancybox_sprite.png INFO Generated: archives/2019/05/index.html INFO Generated: fancybox/fancybox_sprite@2x.png INFO Generated: archives/2019/index.html INFO Generated: css/fonts/fontawesome-webfont.eot INFO Generated: fancybox/helpers/jquery.fancybox-buttons.css INFO Generated: js/script.js INFO Generated: fancybox/jquery.fancybox.pack.js INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.css INFO Generated: fancybox/helpers/jquery.fancybox-buttons.js INFO Generated: css/style.css INFO Generated: fancybox/helpers/jquery.fancybox-media.js INFO Generated: css/fonts/fontawesome-webfont.woff INFO Generated: fancybox/helpers/jquery.fancybox-thumbs.js INFO Generated: fancybox/helpers/fancybox_buttons.png INFO Generated: css/fonts/fontawesome-webfont.svg INFO Generated: css/fonts/fontawesome-webfont.ttf INFO Generated: css/fonts/FontAwesome.otf INFO Generated: css/images/banner.jpg INFO Generated: 2019/05/23/hello-world/index.html INFO Generated: fancybox/jquery.fancybox.js INFO 28 files generated in 930 ms

    继续执行$ hexo deploy发布,报错继续往下,不报错就忽略对报错的处理

    $ hexo deploy FATAL bad indentation of a mapping entry at line 83, column 9: branch: master ^ YAMLException: bad indentation of a mapping entry at line 83, column 9: branch: master ^ at generateError (D:\blog\myblg\node_modules\js-yaml\lib\js-yaml\loader.js:167:10) at throwError (D:\blog\myblg\node_modules\js-yaml\lib\js-yaml\loader.js:173:9) at readBlockMapping (D:\blog\myblg\node_modules\js-yaml\lib\js-yaml\loader.js:1107:7) at composeNode (D:\blog\myblg\node_modules\js-yaml\lib\js-yaml\loader.js:1359:12) at readDocument (D:\blog\myblg\node_modules\js-yaml\lib\js-yaml\loader.js:1519:3) at loadDocuments (D:\blog\myblg\node_modules\js-yaml\lib\js-yaml\loader.js:1575:5) at Object.load (D:\blog\myblg\node_modules\js-yaml\lib\js-yaml\loader.js:1596:19) at Hexo.yamlHelper (D:\blog\myblg\node_modules\hexo\lib\plugins\renderer\yaml.js:7:15) at Hexo.tryCatcher (D:\blog\myblg\node_modules\bluebird\js\release\util.js:16:23) at Hexo.<anonymous> (D:\blog\myblg\node_modules\bluebird\js\release\method.js:15:34) at Promise.then.text (D:\blog\myblg\node_modules\hexo\lib\hexo\render.js:61:21) at tryCatcher (D:\blog\myblg\node_modules\bluebird\js\release\util.js:16:23) at Promise._settlePromiseFromHandler (D:\blog\myblg\node_modules\bluebird\js\release\promise.js:512:31) at Promise._settlePromise (D:\blog\myblg\node_modules\bluebird\js\release\promise.js:569:18) at Promise._settlePromise0 (D:\blog\myblg\node_modules\bluebird\js\release\promise.js:614:10) at Promise._settlePromises (D:\blog\myblg\node_modules\bluebird\js\release\promise.js:694:18) at _drainQueueStep (D:\blog\myblg\node_modules\bluebird\js\release\async.js:138:12) at _drainQueue (D:\blog\myblg\node_modules\bluebird\js\release\async.js:131:9) at Async._drainQueues (D:\blog\myblg\node_modules\bluebird\js\release\async.js:147:5) at Immediate.Async.drainQueues [as _onImmediate] (D:\blog\myblg\node_modules\bluebird\js\release\async.js:17:14) at runCallback (timers.js:705:18) at tryOnImmediate (timers.js:676:5)

    检查配置文件,改成如下 repo改成repository,冒号后面一定要有空格!!!

    deploy: type: git repository: https://github.com/biggerBoy/biggerBoy.github.io.git branch: master

    再执行$ hexo deploy 什么都不输出,或报错都是不成功,若输出如下,就是成功

    $ hexo deploy INFO Deploying: git INFO Setting up Git deployment... Initialized empty Git repository in D:/blog/myblg/.deploy_git/.git/ [master (root-commit) de8dd58] First commit 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 placeholder INFO Clearing .deploy_git folder... INFO Copying files from public folder... INFO Copying files from extend dirs... warning: LF will be replaced by CRLF in 2019/05/23/hello-world/index.html. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in archives/2019/05/index.html. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in archives/2019/index.html. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in archives/index.html. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in css/style.css. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.css. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-buttons.js. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-media.js. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.css. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in fancybox/helpers/jquery.fancybox-thumbs.js. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.css. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.js. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in fancybox/jquery.fancybox.pack.js. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in index.html. The file will have its original line endings in your working directory. warning: LF will be replaced by CRLF in js/script.js. The file will have its original line endings in your working directory. [master 0c627f1] Site updated: 2019-05-23 14:07:10 29 files changed, 5785 insertions(+) create mode 100644 2019/05/23/hello-world/index.html create mode 100644 archives/2019/05/index.html create mode 100644 archives/2019/index.html create mode 100644 archives/index.html create mode 100644 css/fonts/FontAwesome.otf create mode 100644 css/fonts/fontawesome-webfont.eot create mode 100644 css/fonts/fontawesome-webfont.svg create mode 100644 css/fonts/fontawesome-webfont.ttf create mode 100644 css/fonts/fontawesome-webfont.woff create mode 100644 css/images/banner.jpg create mode 100644 css/style.css create mode 100644 fancybox/blank.gif create mode 100644 fancybox/fancybox_loading.gif create mode 100644 fancybox/fancybox_loading@2x.gif create mode 100644 fancybox/fancybox_overlay.png create mode 100644 fancybox/fancybox_sprite.png create mode 100644 fancybox/fancybox_sprite@2x.png create mode 100644 fancybox/helpers/fancybox_buttons.png create mode 100644 fancybox/helpers/jquery.fancybox-buttons.css create mode 100644 fancybox/helpers/jquery.fancybox-buttons.js create mode 100644 fancybox/helpers/jquery.fancybox-media.js create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.css create mode 100644 fancybox/helpers/jquery.fancybox-thumbs.js create mode 100644 fancybox/jquery.fancybox.css create mode 100644 fancybox/jquery.fancybox.js create mode 100644 fancybox/jquery.fancybox.pack.js create mode 100644 index.html create mode 100644 js/script.js delete mode 100644 placeholder Enumerating objects: 46, done. Counting objects: 100% (46/46), done. Delta compression using up to 4 threads. Compressing objects: 100% (36/36), done. Writing objects: 100% (46/46), 507.67 KiB | 5.46 MiB/s, done. Total 46 (delta 3), reused 0 (delta 0) remote: Resolving deltas: 100% (3/3), done. To https://github.com/biggerboy/biggerboy.github.io.git + 07ed017...0c627f1 HEAD -> master (forced update) Branch 'master' set up to track remote branch 'master' from 'https://github.com/biggerboy/biggerboy.github.io.git'. INFO Deploy done: git

    说明成功!!!!

    访问http://biggerboy.github.io后如下,成功了。这是默认的主题,默认页面

    到此,搭建完成,可以自己任意玩了。

    一些命令,都是在git bash下执行,

    创建文章:hexo new “文章名”, 会在\source_posts下生成一个.md文件,打开它编辑你的文章就行了,这个文件是用Markdown编辑器编辑的。

    写完文章后,git bash分别执行三个命令hexo clean,hexo g, hexo d

    hexo clean可以不执行

    这时候在访问你的网站就有你新写的文章了。

    还可以增加搜索功能,评论功能,订阅功能,访客量统计,个性化导航栏,更换主题 欢迎访问我的博客,一起交流

    最新回复(0)