zoukankan      html  css  js  c++  java
  • hexo博客搭建

    介绍

    Hexo是一种静态网页框架,可以把md文件渲染成网页文件

    优点:简单易用(对于用惯了 git 和 markdown 的盆友们来说 ),0成本,稳定,可定制,简洁美观

    前期准备

    • 安装Git
    • 安装Nodejs

    安装Git

    直接下载安装,记得我的电脑-属性-高级系统设置-环境变量-系统/我的环境变量里添加Git的安装路径(就是告诉自己的电脑Git在哪,这样就任何一个文件夹位置都能使用Git了)

    image-20200621220319488

    例如Git安装在D:Gitgit-2.22.0这个位置

    则环境变量里添加:

    D:Gitgit-2.22.0usrin

    D:Gitgit-2.22.0usrinssh-keygen.exe

    安装Nodejs

    建议新手安装最新的稳定版本,同样也得在环境变量里添加,比如安装在D: odejs就添加D: odejs

    初始化Hexo

    在某个文件夹位置点击鼠标右键,打开git bash,输入

    hexo init
    

    git会自动拉取hexo的安装包

    安装完成会出现以下这些文件

    scaffolds 配置文件,先别管

    themes hexo主题文件

    _config.yml hexo全局配置文件

    package.json 记录依赖包

    如果网速差点的话,git在下载landscape的时候会看住(自己看看是不是),如果是的话直接在git bash 按Ctrl+C强行终止下载(这个主题文件可以先不要,换成别的主题文件就好了,除非你喜欢hexo默认的主题)

    PS:配置好之后也会有一堆需要修改、美化,如果你觉得我的这个修改后的看着还行,可以直接clone本站修改后的主题配置

    配置主题

    下载主题,放到hexo目录的theme文件夹内, Hexo主题下载 ,比如我下载Sakura主题,并且把下载的文件修改成Sakura

    在hexo根目录打开_config.yml,把theme: landscape修改成theme: Sakura(注意英文冒号后面有个空格,没有的话会报错)

    安装插件

    安装Hexo运行必备的插件,首先安装淘宝镜像(因为npm实在太慢了)

    安装cnpm,命令:

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    1
    

    安装后,使用以下命令测试是否安装成功

    cnpm -v
    1
    

    成功后,以后都使用 cnpm 代替以前 npm 来执行命令!

    • 安装必要插件
    cnpm i --save hexo-deployer-git 
    cnpm i --save  hexo-generator-archive
    cnpm i --save hexo-generator-index
    cnpm i --save hexo-generator-tag
    cnpm i --save hexo-renderer-ejs
    cnpm i --save hexo-renderer-kramed
    cnpm i --save hexo-renderer-stylus
    cnpm i --save hexo-server
    cnpm i --save hexo-wordcount
    cnpm i --save hexo-generator-category
    
    #下面的是非必要插件
    cnpm i --save hexo-wordcount
    cnpm i -S hexo-prism-plugin
    cnpm i hexo-permalink-pinyin --save
    cnpm i --save hexo-generator-feed
    cnpm install hexo-generator-search --save
    

    然后,输入``hexo g,等待md文件渲染成html文件再输入hexo s`

    打开浏览器输入http://localhost:4000/

    定制美化

    根据自己的需要定制啦,记得多用git add -A和git commit -m "提交缓存区" 保存,万一搞得报错了至少能用git reflog回滚。

    图床

    如果网速可以建议用PicGo+github pages搭建图床(但是上传速度很慢);也可以用七牛云、又拍云等搭建图床,但是这种我个人觉得要么收费要么不好用。

    我用coding/gitee+pcigo

    本站修改后的主题

    国内仓库地址,直接git clone下来

    在电脑上找个合适的文件夹位置(放博客的位置)

    安装淘宝镜像

    npm install cnpm -g --registry=http://registry.npm.taobao.org #全局安装
    npm install cnpm --registry=http://registry.npm.taobao.org		#局部安装
    

    安装上hexo必备的一些插件

    cnpm i --save hexo-wordcount
    cnpm i --save hexo-deployer-git 
    cnpm i -S hexo-prism-plugin
    cnpm i hexo-permalink-pinyin --save
    cnpm i --save hexo-generator-feed
    cnpm install hexo-generator-search --save
    
    cnpm i --save  hexo-generator-archive
    cnpm i --save hexo-generator-index
    cnpm i --save hexo-generator-tag
    cnpm i --save hexo-renderer-ejs
    cnpm i --save hexo-renderer-kramed
    cnpm i --save hexo-renderer-stylus
    cnpm i --save hexo-server
    cnpm i --save hexo-wordcount
    cnpm i --save hexo-generator-category
    cnpm i --save hexo-filter-mermaid-diagrams
    

    然后需要修改一些必要的配置

    首先在根目录的_config.yml修改自己的网站名,作者名等,url处填写自己的网站名

    网站地址

    填写打开了 GitHub pages 或coding pages 的地址

    开启pages的远程仓库

    如果要打开评论,这里推荐用Valine,在主题下的_config.yml,把enable的false改成true,并且注册Valine账号填写appId和appKey

    评论

    另外主题配置下的github地址换成自己的github地址(还有好几个哦,自己搜索替换一下吧)

    github地址

    文章的img如果没有填写,就会从指定的图片里根据哈希码选择一张图片作为封面(还是在主题配置修改)

    文章封面图片

    hexo中的latex踩坑

    latex换行的bug(是插件渲染的问题,可以用四个/来换行),其他方面都没毛病。hexo-renderer-pandoc 我也尝试过,但效果还来还是不如hexo-renderer-kramed(即上面安装的那个插件)如果不想用4个/来换行也可以参考下这个Hexo中LaTeX公式渲染Hexo 书写 LaTeX 公式时的一些问题及解决方法

    (总之,hexo的latex渲染还是有点坑,但配置好其实也没毛病~推荐就用我上面指定的那些插件)

    如果用typora写出来的latex有问题的话,比如像这样

    Typora写的公式VScode上看起来也没毛病

    在各种markdown编辑器看着这个公式都能正常显示,但实际上经过hexo渲染打开的网页的就会像下图这样:

    这个其实是因为Typora的markdown源码不标准,所以尽管在hexo的mathjax渲染出问题

    如果打开CSDN或者github的markdown编辑就会看出问题了

    image-20200708221053504

    其实问题就出在typora的公式块的两个 $ $ 不是相连的,所以正确的解法是把中间的空行还有一些多余的空格删除掉即可。

    $$$$中间不回车

    正常显示之后,再把这段复制粘贴到vscode打开的md文件,hexo渲染出的网页就显示正常啦。

    (一句话,想办法让公式在CSDN的markdown编辑器显示正常即可)

  • 相关阅读:
    Spring Freamwork 开发初体验
    mybooklist.cn 书单de故事六月十六日
    mybooklist 日志5.12
    我的书单mybooklist
    Bison
    Java学习日记——基础篇(一)常识
    Python学习日记(十)—— 杂货铺(全局变量补充、Python参数传递、字符串格式化、迭代器、生成器)
    Python学习日记(九)—— 模块二(logging、json&pickle、xml、requests、configparser、shutil、subprocess)
    Python学习日记(八)—— 模块一(sys、os、hashlib、random、time、RE)
    Python学习日记(七)——装饰器
  • 原文地址:https://www.cnblogs.com/MemoryDrive/p/13296976.html
Copyright © 2011-2022 走看看