科技资讯

Document

个人博客网站开发笔记2

  • 2024-05-24
  • dfer
  • 149
  • CSDN

文章目录

前言

现在继续看教程

p2 hexo安装与使用

link

啊有点难受，开幕就是需要自己先安装Nodejs和Git，我先去找一下怎么安装这两个软件

安装 Nodejs

link油管教程，看下跟着这个能不能装好

Nodejs官网

在这里插入图片描述

应该是这个地方？我的官网打开和教程不太一样，有点害怕安装不好

在这里插入图片描述

选择一个长期维护的最新版本，应该没啥问题

原来这个网站是国外网站，幸好之前学会了科学上网

看着视频，一秒一秒暂停，安装的非常谨慎，

在这里插入图片描述

有被博主的电脑壁纸激励到，希望自己别那么懒惰
在这里插入图片描述

在这里插入图片描述
操作一下命令行，输入node -v

出现了刚刚安装的版本号，表示安装成功了，爽

安装 Git

油管视频教程

git官网

我选了一个最新版本进行安装，害怕出现问题

在这里插入图片描述
发现自己之前买的linux网课有这个，自己得抓紧时间学习，不可以懈怠呀

安装的时候，勾选不敢多点一个选项，生怕啥时候出啥问题

在这里插入图片描述

需要选择一个默认的编辑器，但是我电脑上没有Vim这个编辑器，不会要下载一个Vim吧，好吧，其实躲不掉的，常用的软件估计学到后面都是需要安装上的，之前自己完全不会用github，现在其实自己也稍微懂一点点github了

在这里插入图片描述
好了，现在装好了

在这里插入图片描述
打开的是git bash，搜索打开是命令行的形式

输入git出现下面的代码，炫酷

在这里插入图片描述

Git Bash的使用，代码克隆Clone

首先输入pwd，打印当前所在的目录
在这里插入图片描述
视频说，如果对linux比较熟悉的话，对这个使用就比较简单，等之后有时间就开始学linux

输入cd ..，到上一层的目录
在这里插入图片描述

在这里插入图片描述

输入mkdir git-test,出现了一个拒绝，是因为没有这个权限，所以可以把这个软件关掉，重新打开，用管理员模式打开这个软件
在这里插入图片描述

按照之前的操作步骤可以实现创建一个新的目录的效果
在这里插入图片描述
ls表示的是查询有哪些目录

输入cd git-test，可以进入到git-test所在的目录
在这里插入图片描述
pwd查询这个目录的名字
在这里插入图片描述
输入git clone +复制的github链接，出现下面的结果
在这里插入图片描述
ls查询
在这里插入图片描述
在文件管理器里面可以发现，确实下载到本地了，所以所谓的clone就是下载到本地的意思，只是用的是命令行，看起来比较高级，直接炫技就完事
在这里插入图片描述
输入git version
在这里插入图片描述
表示安装成功了，其实我前面可以clone明显就是安装成功了，现在可以继续看第二个教程继续学习

命令行里面输入

npm install hexo-cli -g

,好吧，我其实想找一下命令行的语言是什么语言，搜一下吧，原来不是编程语言
在这里插入图片描述
出现这个界面，应该没啥问题
在这里插入图片描述
前面的命令行可以选择bash格式

Bash是一个命令处理器，通常运行于文本窗口中，并能执行用户直接输入的命令。Bash还能从文件中读取命令，这样的文件称为脚本。和其他Unix shell 一样，它支持文件名替换（通配符匹配）、管道、here文档、命令替换、变量，以及条件判断和循环遍历的结构控制语句。包括关键字、语法在内的基本特性全部是从sh借鉴过来的。其他特性，例如历史命令，是从csh和ksh借鉴而来。总的来说，Bash虽然是一个满足POSIX规范的shell，但有很多扩展。

CLI的意思是命令行接口，表示的意思是，除了安装好hexo这个软件，还安装了命令行，也就是说，可以通过命令行来方便的操作，虽然我觉得，命令行真不如图形化界面方便呀

在这里插入图片描述
然后输入

hexo init test

在这里插入图片描述
有点幸运，我的没有出现报错，但是博主的出现了报错

cd test

查询刚刚的文件
在这里插入图片描述
输入下面的命令，把没有安装好的文件再安装一遍，其实我应该没事，我刚刚貌似一遍就安装成功了

npm install

在这里插入图片描述
安装git的原因就是要从github上面下载文件到本地使用，所以为啥不直接把所有文件放在一个安装包里面呢，我觉得第一是，github随时维护，可以安装最新的文件，第二是设置一定的门槛，区分学过这个的和没学过这个的，其实就是花时间

输入

dir

可以查看目录
在这里插入图片描述

输入下面的命令

hexo g

好像可以创建网站？我存疑哈哈，这就可以了吗
在这里插入图片描述
我这边运气比较好，generated后面明显有完整的文件，视频里面是创建失败了，说是不兼容，我这边运气比较好，兼容了

我看到博主就是把命令行关掉，重新打开，然后再输入一遍这个命令，就可以了

在这里插入图片描述

输入dir查询目录，现在多了一个public的目录，表示的是我们生成的网站

输入hexo s可以打开网站
在这里插入图片描述
这里面有一个链接，复制到浏览器打开

link，我刚刚把链接复制过来，多了一个英文的点，就无法生成链接，有点无奈

在这里插入图片描述
这个进到了一个官网，对我没啥用呀，我想要的是，只属于我的，个人博客网站，要有自己的比较简短的域名，我自己可以进行后台管理，后面还可以添加一些功能之类的

p3 写作

有点无奈，重新进命令行，应该是需要进到所在的文件夹，或者我试试能不能直接用命令

我输入下面的命令

hexo new "post title"

出现下面这个情况，应该是不行的，和博主的不一样，我应该要先进到这个文件目录下面，像博主一样
在这里插入图片描述
这是博主的命令行
在这里插入图片描述

我需要先输入cd test，然后再输入这个命令hexo new "post title"，出现下面的界面，和视频里面是一样的
![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/9edd238950d648b2bd3426fe2f6dfa1a.png

md表示的是makedown文件，我现在写这篇blog就是用的makedown语法

命令行里面写了文件地址，我们在文件管理器里面找到这个md格式的文件，把它打开，显示是这样子
在这里插入图片描述

一级标题

二级标题

三级标题

四级标题
五级标题
六级标题
  • 强调文本 * _ 强调文本 _
    ** 加粗文本 ** __ 加粗文本 __
    == 标记文本 ==
    ~~ 删除文本 ~~
    引用文本
    H~ 2 ~ O is是液体。
    2^ 10 ^ 运算结果是 1024。

我把上面从csdn复制的一些makedown语法复制到vscode里面，就是刚刚打开的那个文件里面
在这里插入图片描述
使用生成网站的命令hexo g
在这里插入图片描述
前面需要把修改过的文件保存一下，然后输入hexo g，再输入hexo s，刷新一下网页，就可以看到刚刚编辑的语法，在网页上面是正常显示的

我刚刚在手机上打开了一下这个链接，没啥用，无法访问

在这里插入图片描述
就和我之前学html和css一样，只能在自己的电脑上用，属于是静态网页了

输入hexo new draft，再打开生成的这个草稿纸文件，编辑一些内容，然后保存，输入hexo g，输入hexo s，然后刷新一下网页，出现下面的界面，表示可以了
在这里插入图片描述

nunjucks官网：一种丰富而强大的 JavaScript 模板语言。

这个链接我没啥用，之后有机会找一个教程学一下，这个是一个模板，可以编辑自己的模板，使用自己的模板的时候，把模板的名字替换原来的page这种命令即可，前面的部分还是一样