0%

Mac系统升级之后,造成pods不可用,这里找到了解决的方案,前提是已经安装了cocoapods。

1
2
3
sudo gem update --system
sudo gem install -n /usr/local/bin cocoapods -v1.5.3
pod setup

第一步:更新gem。
第二步:安装指定的cocoapods版本,我这里指定的是1.5.3
第三步:更新pod

准备

  1. 安装Node.js,安装完成之后可以正常使用npm命令
  2. 安装hexo,npm install -g hexo-cli

创建步奏

  1. 创建git仓库,这里需要注意一下,GitPage会默认给分配二级域名,但是当仓库名与账号组织名称一样的情况下会省略掉二级域名,所以这里创建的名称为{yourname}.github.io,一定是以github.io结尾的。当然也可以创建其他的。只是在之后的配置上略有不同。

  2. 创建仓库时使用readme进行初始化。

  3. 同时新建一个hexo分支,并设置为默认分支。

  4. 使用hexo init {name}来初始化,或者新建一个{name}文件夹,在该文件夹下,执行hexo init命令是一样的效果。

  5. 依次执行

    hexo clean:clean
    hexo g:generate,编译生成HTML代码,放在根目录下的public下。
    hexo s:serve,提供serve命令把博客在本地运行起来,然后点击给出的链接就可以正常的使用了,如果链接打不开,可能是端口被占用,可以使用hexo s -p 端口号来指定端口号。

  6. 我这里是用了一个比较主流的主题next,以此为例,大家喜欢什么主题自己配置就好。

    1
    2
    git clone https://github.com/theme-next/hexo-theme-next themes/next

    依次执行命令进行配置就好了。随后在根目录下的_config.yml文件里配置: next

  7. 删除主题下的git。这里有一点要注意的,在remote远程仓库之前,要把themes文件夹拉下来的主题,删除对应的.git文件删除掉。因为外部已经有了git,内部文件夹也有git时会出现问题。

  8. 配置根目录下的_config.yml文件

    1
    2
    3
    4
    5
    6
    7
    8
    # Site
    title: 不会飞的小白
    subtitle: 'Stay Hungry, Stay Foolish'
    description: ''
    keywords: iOS, Swift, GitHub
    author: 不会飞的小白
    language: zh-CN
    timezone: ''

    Site里头的东西,根据自身想法看着写就行。有一个需要注意的是language,它的值是根据对应的Theme中的语言相对应的。

    1
    2
    3
    4
    # URL
    ## If your site is put in a subdirectory, set url as 'http://yoursite.com/child' and root as '/child/'
    url: http://liujiaboy.github.io/
    root: /

    这里也需要注意。如果添加了搜索功能或者没有按照{name}.github.io这种命名方式创建的,这里的是必须要填写的。URL:为Github Page生成后对应的地址。root:为哪一级为根目录。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    # Extensions
    ## Plugins: https://hexo.io/plugins/
    ## Themes: https://hexo.io/themes/
    theme: next
    #主题

    # Deployment
    ## Docs: https://hexo.io/docs/deployment.html
    deploy:
    type: git
    repo: https://github.com/liujiaboy/liujiaboy.github.io.git
    branch: master

    这里是对应的仓库地址,type一定是 git类型,分支可以选择,我这里是master。

  9. 上面的配置完成之后,再执行步奏5,本地预览没问题后,可以直接走发布。而发布也就是将生成的public文件中的内容push到deploy对应的仓库的分支中。

    hexo d:deploy: 发布。
    如果出现问题,执行npm install hexo-deployer-git安装git插件。

  10. 这个时候,可以在根目录下,remote远程仓库了。

    git remote add origin <远程版本库URL>。这个时候本地默认就是之前创建的hexo分支。

    执行git add ., git commit -m"xxx"之后,在push之前,先把远程分支上的内容pull下来。这个时候执行

    git pull origin hexo

    如果出现问题,是因为本地有提交内容无法完成merge操作。将上面的执行命令改为

    git pull origin hexo --allow-unrelated-histories

    完成merge操作之后,执行git push origin hexo就可以了。

这个时候就已经完成了整体的库都放在Github上了。默认分支hexo存放所有的数据,master分支存放Github Page需要的数据。这就可以开心的玩耍了,也不用担心换设备迁移带来的问题了。

hexo迁移

  1. 确保当前设备已经有Node.js, hexo环境。

  2. 从远程仓库clone到指定文件夹。

  3. 在该文件夹下,执行

    1
    npm install hexo --save

    这一步是必须执行的,创建hexo环境,如果在本电脑的环境下已经执行过下面两个命令,就不用重复执行了。

    1
    2
    npm install
    npm install hexo-deployer-git

    这个时候就没必要执行hexo init了,因为当文件夹下有内容的时候跟本执行不了,会报错。

  4. 如果是多设备同时开发的话,那就需要用到 git pull origin hexo来拉取最新数据了,但是一般情况下不会出现,毕竟自己的博客不会涉及到多人协作。

  5. 就可以开心的玩耍了。

相关配置

NexT主题添加theme-next-canvas-nest几何动效

1
2
cd themes/next
git clone https://github.com/theme-next/theme-next-canvas-nest source/lib/canvas-nest

完成上诉操作之后,再next配置文件_config.yml中配置开启canvas_nest,如果没有相关配置,直接复制代码粘贴进去就行。

1
2
3
4
5
6
7
canvas_nest:
enable: true
onmobile: true # display on mobile or not
color: '0,0,255' # RGB values, use ',' to separate
opacity: 0.5 # the opacity of line: 0~1
zIndex: -1 # z-index property of the background
count: 99 # the number of lines

订阅 rss

博客一般都需要rss订阅,如果要开启,需要安装一个插件。安装完成会自动生成相关配置。

1
npm install hexo-generator-feed --save

生成的rss对应的文件public/atom.xml

创建文章

1
hexo new <文章名>

新建一篇文章,使用markdown的格式。在一篇文章的开头,会有如下必要信息

1
2
3
4
5
6
7
8
9
10
---
title: 利用Github从零开始搭建Hexo博客,可迁移
date: 2020-03-06 22:07:06
tags:
- Github
- hexo

categories:
- 杂记
---

其中title, date是必填的,tags就是标签,可选, categories:分类,也是可选。在next主题下,默认会生成目录。

创建标签页 tags

1
hexo new page tags

也会生成类似文章的md文件,可以在头部自行添加。

1
2
3
4
title: tags
date: 2020-03-06 22:07:06
type: tags
comments: false

type: 指定为tags
comments:是否允许评论

分类页 categories

1
hexo new page categories

指定type:categories

hexo默认会创建archives类型的文件,不会默认创建tags和categories,但是创建完成这两个之后,只需要指定type类型即可,不用在文件中添加其他数据。

搜索页

很多情况下需要搜索全站内容,所以有必要支持搜索。需要安装插件支持

1
npm install hexo-generator-searchdb --save

很多主题对应的搜索都不一样,但是搜索的插件都是必须的。这里需要修改上面提到的URL并指定root文件路径。

404页面

当页面出错的时候,就很有必要的添加一个404的错误页面。直接在根目录下创建一个404.md文件即可。也有会接入腾讯公益404广告的,自行google吧。

这个只针对绑定域名的有效,GitHub默认分配的是没有效果的。

1
2
3
4
5
6
7
---
title: 404 Not Found
date: 2020-03-06 11:06:55
---
<center>
对不起,您访问的页面不存在或已被删除
</center>

创建about

1
hexo new page about

使用图片

  1. 绝对路径引用
    当Hexo项目中只用到少量图片时,可以将图片统一放在source/images文件夹中,通过markdown语法访问它们。

    1
    2
    3
    source/images/image.jpg
    // 这样就可以了
    ![](/images/image.jpg)
  2. 相对路径引用
    图片除了可以放在统一的images文件夹中,还可以放在文章自己的目录中。文章的目录可以通过配置_config.yml来生成。

    1
    post_asset_folder: true

    修改之后,执行命令$ hexo new post_name,在source/_posts中会生成文章post_name.md的同时,会生成文章同名的文件夹post_name。将图片资源放在post_name中,文章就可以使用相对路径引用图片资源了。

    1
    ![](image.jpg)

    这个时候,可能还是不管用。那就需要下载插件了。

    1. 在当前博客根目录下,执行npm install hexo-asset-image --save
    2. 找到node_modules --> hexo-asset-image --> index.js文件,找到58行代码:$(this).attr('src', config.root + link + src);
    3. 修改为:$(this).attr('src', src);

遇到的问题

1. 默认buffer太小,push、pull失败

1
fatal: unable to access 'https://github.com/liujiaboy/liujiaboy.github.io.git/': LibreSSL SSL_read: SSL_ERROR_SYSCALL, errno 60

解决方案:

1
git config --global http.postBuffer 1048576000

这中问题的原因是,大文件造成的,curl的postBuffer默认值太小,增大缓存配置就好了。

Error: Spawn failed

  1. 删除.deploy_git文件夹;
  2. 输入git config –global core.autocrlf false
  3. 然后,依次执行:
    1. hexo clean
    2. hexo g
    3. hexo d

总结

感谢大佬们做的总结,不一一列举了。感谢
next: Github