搭建基于Hexo的个人博客,以及git相关命令

全文写完之后的总结

测试命令

hexo clean
hexo g
hexo s

上传到服务器命令,如果不行,就晚些再git上去

hexo clean
hexo g
hexo d

上传到服务器(如果上一个命令用不了),也要先hexo clean,hexo g

git init
git add .
git commit -m "first commit"
git push -u new_server master

上传到github仓库

git init
git add .
git commit -m "first commit"
git push -u origin master

一、安装hexo

 参考B站CodeSheep视频:手把手教你从0开始搭建自己的个人博客 |无坑版视频教程| hexo_哔哩哔哩_bilibili

安装node.js

nodejs.org下载长期支持版

用管理员身份进入powershell

node -v

npm-v 查看安装情况

切换镜像源到淘宝

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

全局安装hexo

 cnpm install -g hexo-cli

hexo -v 验证是否安装完毕

在桌面建一个文件夹,叫做blog,然后cd进去

hexo init初始化,

hexo s 然后启动博客,能在本地的4000端口访问到

二、写文章

hexo n "文章名字",生成文章,写完了hexo s启动就能看到新的文章

可以使用vscode进入文件夹去编辑,使用的是markdown语法

参考:HTML和markdown-CSDN博客

发布新文章之前记得hexo clean

然后生成需要的文章 hexo g

然后再重新启动hexo s,文章就更新了

三、部署到github上

3.1 新建一个仓库

名称必须是   用户名.github.io,可能是基于流量控制的要求吧,然后复制ssh的路径用来传递代码

3.2 安装部署插件

在vscode终端使用 npm install --save hexo-deployer-git

3.3 配置_config.yml

3.4 部署到远程仓库

hexo d  (d应该是deploy的意思)

需要先远程连接到github的ssh,需要在电脑上提前配置好和github的远程连接:

使用git+ssh访问github,避免下载资源失败-CSDN博客

然后再执行hexo d,就成功上传了

四、访问博客地址thekingofjumpshoot.github.io

如果出现报错如下,网页是404,则需要进行下一步操作

需要在项目处进行设置如图所示

就可以正常访问了

五、安装yilia主题

平时如果git clone 不下来,就使用ssh的链接,去下载代码

这里记住要安装在themes目录下,起名叫做yilia,后边要通过_config.yml进行修改

在_config.yml里切换主题为yilia

然后是一连串的流程:

hexo clean
hexo g
hexo s
hexo d

然后成功切换为yilia主题

也能在公网的github.io上访问了

六、实现公网IP访问

参考自:远程部署_哔哩哔哩_bilibili

文档:hexo本地博客部署到云服务器 | Black Flies

不一样的地方:

我的Ngnix配置文件目录在/etc/nginx/nginx.conf

然后再配置文件的http中间加一段这个,注意一个对齐代码格式,因为可能是python写的讲究对齐

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /home/blog;    # 修改为创建的blog目录地址
    server_name www.example.com; # 需要修改为你的域名(或者公网ip)
    
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;
    location / {
    }
    error_page 404 /404.html;
        location = /40x.html {
    }
    }

注意里面的fpgaghost.com是域名,需要修改的。

6.1 在阿里云完成域名解析(不要在cloudflare,太慢了)

即通过域名fpgaghost.com域名访问博客

七、部署到云服务器上

远程部署_哔哩哔哩_bilibili

7.1 配置http

在http块里面加一个server块,记得补一个},作者的代码少了一个,如图

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /home/blog;    # 修改为创建的blog目录地址
    server_name www.fpgaghost.com; # 需要修改为你的域名(或者公网ip)
    
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;
    location / {
    }
    error_page 404 /404.html;
        location = /40x.html {
    }
	}

上面的配置显示有其他的default_server,所以换一个server块

server {
    listen 80;
    root /home/blog;    # 修改为创建的blog目录地址
    server_name www.fpgaghost.com; # 需要修改为你的域名(或者公网ip)
    
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;
    location / {
    }
    error_page 404 /404.html;
        location = /40x.html {
    }
	}

八、配置免密登录

免密登录配置_哔哩哔哩_bilibili

8.1 报错

报过一个错,无法上传到服务器,原因是没有安装git,但是已经下载代码下来编译过。重新

apt install git就可以

其次是复制粘贴的公钥不知道为什么会有变化,使用的vscode,突然把公钥重新粘贴过去,然后文件左边多出来一个白色圆点,哈哈哈哈。

九、界面美化

参考于:Butterfly 安裝文檔(三) 主題配置-1 | Butterfly

Butterfly 安裝文檔(四) 主題配置-2 | Butterfly

使用Hexo搭建个人博客手摸手教学(10)|ButterFly主题配置一_哔哩哔哩_bilibili

下载butterfly主题:

 git clone git@github.com:jerryc127/hexo-theme-butterfly.git .\themes\butterfly

切换使用butterfly,出现界面显示不出来,在csdn上面下载用了这个命令:

npm install --save hexo-renderer-jade hexo-generator-feed hexo-generator-sitemap hexo-browsersync hexo-generator-archive

但是有威胁警告,先不管了。

9.1 设置标签页

hexo new page tags

默认生成位置如下,记得改类型为tags

type: "tags"

9.2 设置新的主题页

hexo new page categories

9.3 创建友情链接

hexo new page link

9.4 制作博客的导航栏

缩进是两个空格

生成的导航栏会自动匹配到source下面的文件夹

9.5 添加联系方式

在里面找到想要的图标https://fontawesome.com/icons?from=io

然后弄到它的类名,如图

然后点击图标就能跳转到抖音界面

同样再添加哔站,特别注意邮箱前面需要加上mailto:

9.6 文章展现

2是在有描述的时候,展现文章名称和描述。

9.7 各种地方的图片

9.8 设置置顶文章

在文章的开头设置

效果如图

9.9 安装搜索插件

npm install hexo-generator-search --save

在blog的conf文件补上这一行

#搜索插件
search:
  path: search.xml
  field: post
  format: html
  limit: 10000

在themes的butterfly下面打开local_search

就可以在页面进行搜索了。

9.10 修改目录格式

在butterfly的config文档里面,将配置配置成如下

效果如图

十、git的版本控制

git实现代码版本控制-CSDN博客

十一、为域名申请SSL证书

参考网址:https://www.youtube.com/watch?v=cu1RPI18cR8&t=526s

文档:https://naiyous.com/2256.html

十二、配置证书,实现https访问

参考博客:Hexo搭建个人博客 | Black Flies

将证书文件夹复制到/home目录下的fpgaghost,里面有证书和私钥

监听443端口的server块代码

	server {
    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    server_name fpgaghost.com;
    root /home/blog;

    ssl_certificate "/home/fpgaghost/cert.crt";
    ssl_certificate_key "/home/fpgaghost/private.key";
    ssl_session_timeout 10m;
    ssl_ciphers ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-SHA384:ECDHE-RSA-AES256-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256;
    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
	}

至此,完成https的访问

十三、修改简历界面

将导航的简历,对应的界面指向resume文件夹

在source文件夹下创建一个叫做resume的目录,然后使用hexo new page tags命令创建一个新的标签页,放在resume目录下,更改type为"resume"

这样就会自动导航的resume标签

十四、安装typora

参考链接:typora_installaion

typora教程,简单看一遍,数学公式那块暂时不用看

十五、购买阿里云OSS服务然后在Typora上配置

参考链接:阿里云OSS PicGo 配置图床教程 超详细 - 知乎

15.1 picgo的图床oss配置报错解决

配置过程中出现问题:picgo使用阿里云oss显示you must be login to use

解决方式:选择正确的图床

即可在阿里云的OSS上看到上传的图片

15.2 在typora上的图片上传到服务器上只显示链接,不显示图片

需要将oss改为公共读,这样就能通过https的图片链接读取。

  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值