经过一个星期的折腾,总算搞定了服务端的环境搭建。趁着记忆犹新,这里做一些朴实无华并且枯燥的记录。
本文阅读对象:不了解Linux操作系统的小白
在这篇文章中,你可以了解到:linux操作系统入门,通过SSH密钥远程登陆,Docker环境搭建。
开启从零开始的运维之坑路~
一种计算机操作系统。
唔,简单来说就是这样。但它是一个CLI
(command-line interface,命令行界面)组成的操作系统,在图形化的操作界面如windows
得到普及之前,最广泛使用的用户界面就是这样的。
Linux的作者叫 Linus
,瞧,优秀的连名字都是类似的:p
这个操作系统基于GPL 2.0
开源协议,简单来说你可以自由使用它的源码和发行版,也可以修改它的源代码,但是不能闭源——是的,作者坚持开源的理念。
Linux目前有很多发行版,有Dibian
,Redhat
,CentOS
,Ubuntu
…等等,其社区非常繁荣。如果Linus申请专利保护,一定能收获难以想象的财富…事实上,他的开源价值观传播到了全世界,越来越多的人们开始为开源做出贡献,才有了今天这样繁荣的开源生态。
Linus大神还有另一个开源作品git
,它是一种分布式版本控制系统…扯远了,咱还是说Linux吧…
其实,无论图形界面发展到什么水平,命令行方式的操作永远是不会变的,Linux命令有许多强大的功能:从简单的磁盘操作、文件存取、到进行复杂的多媒体图象和流媒体文件的制作都离不开命令行。虽然linux也有桌面系统,但是X-window
也只是运行在命令行模式下的一个应用程序。
我的云主机是阿里云的,操作系统是Ubuntu 18.04.2 LTS
64位的。本文写的不是很好但依然是用心的,接下来的演示也是经过本人深入实践的~
linux的指令大致可以分为三类:
文档型(文档和目录的增删改查)
硬件型(磁盘/进程/服务/网络)
功能型(压缩/解压/下载/远程)
我们先从远程登陆开始,然后边走边看尝试熟悉linux环境,最后集中总结一下这三种常用指令
在本地使用ssh建立和远端主机的会话
1 | ssh root@[ipAddress] -p 22 |
ipAddress
是服务器的公网ip,-p
参数是为ssh远程连接开放的端口,默认为22,可以不用加。
接下来你需要输入密码,这里的密码是隐文,输入时不会从终端中得到任何反馈,输入完成敲击回车你就可以登陆远端。
此时如果一切顺利的话你应该已经成功登陆了,我们可以先查看一下操作系统和内核信息
1 | lsb_release -a #查看操作系统 |
查看磁盘信息
1 | df #显示磁盘的区块信息和使用情况(kB) |
查看根目录的内容
将当前路径切换到根目录下,查看文件列表
1 | cd / #切换目录 |
接下来你会看到这样的列表:
最前面的drwxr-xr-xr
表示了用户目录的操作权,依次是root用户权限,组权限,其他用户权限。d
表示这是一个目录(directory)而不是文件r
表示具有读权限(read)w
表示具有写权限(write)x
表示具有执行权限(execute)
目录的简单说明
home:个人目录,可以放一些软件或存放download文件
etc:一般是一些软件的配置文件
sys:系统文件
usr:系统可执行文件
var:日志文件,因不断变化命名,包含经常存放的www目录
查看CPU/内存/进程
1 | top |
这里的表会动态刷新,Tasks
是当前运行的进程数量,Mem
表示内存占用量,可以按“m”键切换百分比显示
接下来我们可以修改一下主机的用户名
1 | vi /etc/hostname #使用vi命令编辑这个文件 |
这样会进入查看模式,此时按下a
或者i
进入编辑模式,修改里面的内容即修改你的用户名。完成编辑后按下esc
,输入:wq
保存并退出编辑。
重启服务器,就可以看到主机名更新啦
1 | reboot #这样做会断开ssh连接 |
ssh端口默认为22,修改常用端口后可以提高服务器的安全性,降低遭受攻击的风险;按照下面的步骤操作
编辑SSH配置文件
SSH配置文件路径为:/etc/ssh/sshd_config
1 | vi /etc/ssh/sshd_config |
修改端口号
找到port: 22,取消#注释,修改为ssh连接想用的端口号,如
1 | port 10022 |
然后esc
,输入 :wq
保存,退出编辑
1 | ufw allow 10022 |
某些云服务商需要在云端手动放行端口,在云服务控制台可以找到,手动添加规则即可。
重启远端SSH服务
1 | service ssh restart |
尝试重连
1 | ssh root@[ipAddress] -p 10022 |
配置密钥后,就可以免密码建立ssh连接了,而且更加安全
1 | cd ~/.ssh && ls -la #检查用户目录是否存在公钥对; |
若没有id_rsa.pub
,使用下面的命令生成公钥对
1 | ssh keygen |
接下来的会话会询问要将密钥保存在哪里、想要设置的口令等,可以连续敲击回车使用默认设置。
如果设置了私钥口令,则每次建立ssh连接都需要输入口令,然后才会去验证私钥
这个命令会在本地生成两个密钥文件,其中id_rsa.pub
是公钥文件,id_rsa
是私钥文件。私钥万万不可泄漏给他人
1 | cd ~/.ssh && ls -al #查看是否存在authorized_keys |
如果home
下没有.ssh
目录,使用下面的命令来创建.ssh
目录
1 | mkdir -p ~/.ssh |
~
是/home
目录的一个alias
,即别名;类似于/
指代根目录
将在本地生成的公钥文件id_rsa.pub
所有内容复制到该文件中保存:
1 | vi authorized_keys |
1 | cd ~/.ssh && touch config #进入该目录,新建config文件 |
使用命令创建文件的目的主要是不希望其带有任何文件扩展名,接下来你可以使用你喜欢的编辑器打开这个文件进行下面的编辑。
1 | Host cocoonut |
字段说明:
1 | Host:远端主机用户名 |
多个ssh信息都可以写在这个文件中。
接下来,使用ssh [远端主机用户名]
就可以直接建立SSH会话啦!
时下最火的虚拟化技术就是Docker
了。在容器技术之前,业界的网红是虚拟机。而虚拟机技术的代表,是VMWare
和OpenStack
。之所以容器技术会火,是因为它小,轻,快。
特性 | 说明 |
---|---|
文件系统隔离 | 每个进程容器运行在完全独立的根文件系统里。 |
资源隔离 | 可以使用cgroup为每个进程容器分配不同的系统资源,例如CPU和内存。 |
网络隔离 | 每个进程容器运行在自己的网络命名空间里,拥有自己的虚拟接口和IP地址。 |
写时复制 | 采用写时复制方式创建根文件系统,这让部署变得极其快捷,并且节省内存和硬盘空间。 |
日志记录 | Docker将会收集和记录每个进程容器的标准流(stdout/stderr/stdin),用于实时检索或批量检索。 |
变更管理 | 容器文件系统的变更可以提交到新的映像中,并可重复使用以创建更多的容器。无需使用模板或手动配置。 |
交互式Shell | Docker可以分配一个虚拟终端并关联到任何容器的标准输入上,例如运行一个一次性交互shell。 |
资源划分 | Docker采用的是资源共享型的管理方案,所有的Docker使用的硬件资源由docker daemon进行管理与分配。 |
以Ubuntu 18.04 LTS
为例,最省心的安装方式是使用存储库安装。
其他操作系统请移步这里。
更新apt
软件包索引并安装软件包,以允许apt通过HTTPS使用存储库:
1 | 更新 |
添加Docker的官方GPG密钥:
1 | curl -fsSL https://download.docker.com/linux/ubuntu/gpg | sudo apt-key add - |
通过搜索指纹的后8个字符,验证现在是否拥有带有指纹的密钥:
1 | sudo apt-key fingerprint 0EBFCD88 |
设置稳定的存储库。
1 | 以amd64处理器架构为例,其他类型的架构需要修改`arch=`后的参数 |
安装Docker
引擎
1 | 更新apt程序包索引 |
尝试运行Hello world
镜像,验证是否已经正确安装
1 | 首次执行时,这个命令会自动拉取hello-world镜像,然后运行 |
作为前端工程化关键的一环,十分有必要来掌握使用webpack来打包构建项目工程。这里分享我的学习过程,适合作为入门级别来了解webpack的使用。
webpack 是一个javascript的静态模块打包器。通过它可以将多种静态资源(js、css、sass、图片、字体等)转换为一个静态js文件,这种方式可以减少页面的请求,优化网页性能。
环境
确保你的机器配置了Node.js,建议使用最新的稳定版本,并配合nvm管理其版本。
兼容性:
webpack支持所有符合ES5标准的浏览器(不支持IE8及以下版本)
webpack的import()和require.ensure()需要promise,若要想支持低版本需要提前加载polyfill。
黑喂狗(#`O′)
新建一个项目,随便命名(不要使用中文目录),在目录下生成一份package.json
文件:
1 | $ npm init 或 |
npm init
这个命令的作用就是帮我们互动式地生成一份最简单的 package.json 文件,-y
参数则是指定以所有默认选项创建package.json,最为快捷。init 是 initialize 的意思,初始化。
package.json 文件定义了项目的各种元信息,包括项目的名称,git repo 的地址,作者等等。最重要的是,其中定义了我们项目的依赖,这样这个项目在部署时,我们就不必将 node_modules 目录也上传到服务器,服务器在拿到我们的项目时,只需要执行 npm install,则 npm 会自动读取 package.json 中的依赖并安装在项目的 node_modules 下面,然后程序就可以在服务器上跑起来了。
在项目生成好package.json后,可以使用本地安装或者全局安装(不推荐)
1 | npm install webpack webpack-cli --save-dev |
使用上面的命令同时安装webpack及其cli工具。
-dev参数表示将前面两个依赖安装为开发模式下的依赖,可以简写为-D。
webpack在4.0版本后,和webpack-cli是两个分离的项目,因此需要分别安装。
yarn用户:
1 | yarn add webpack webpack-cli -D |
1 | npm install webpack webpack-cli -g |
不推荐这种安装方式,
这会将项目中的 webpack 锁定到指定版本,并且在使用不同的 webpack 版本的项目中,可能会导致构建失败。
1 | npx webpack --version |
上面的命令使用webpack-cli来查看webpack的版本。
访问node_modules/.bin/webpack
来使用命令
在package.json中的scripts字段中定义命令:
1 | "scripts": { |
这样就可以使用npm run build
来启动webpack构建代码。
在项目根目录新建webpack.config.js
文件,它是webpack的配置文件。
webpack的配置项中具有以下五个核心概念:
指示webpack从哪个文件开始进行打包编译,使用相对路径。
单入口简写语法:
1 | const config = { |
多个主入口可以使用数组来传递。
配置output选项可以控制webpack如何写入编译文件。
webpack只承认一个输出配置。
output需要被指定为一个对象,至少要包含以下两个字段:
1 | const config = { |
绝对路径的编辑可能需要使用Node.js的相关API,如:
path.join() 拼接多个路径并返回规范化的路径名
global.__dirname 当前模块的目录名
path.resolve() 将路径或路径片段的序列解析为绝对路径。
loader用于对模块的源码进行转换,可以在import模块时对其进行预处理。
loader可以引入样式、字体、图片、js等各种资源文件,也可以把ts语言转换为js语言,甚至直接import
CSS文件。
官方文档中介绍了三种loader的使用方式:
在webpack.config.js文件中指定loader
在每个import语句中显式指定loader
在shell命令中指定它们
这里的例子采用编写配置的方式指定loader。
安装依赖:css-loader
和style-loader
:
1 | npm install css-loader style-loader -D |
编写配置webpack.config.js
,在config
中添加module
:
1 | module: { |
示例中 loader 使用test
去匹配文件,use
字段的模块将倒序加载流水线处理。
此处的链式写法必须以这样的顺序,即先加载css-loader然后是style-loader,否则编译时webpack无法识别css语法,抛出错误。
在src目录建立main.css
文件,编写简单的样式:
1 | body{ |
在入口js中引用上面的css:
1 | require('./main.css'); |
使用webpack命令编译:
1 | npm run dev |
完成后默认会在在dist目录下生成了一个bundle.js,在同级目录下建立一个HTML文件并在其中引入它,打开后会发现通过js引入的样式已经生效。这便是webpack的功劳。
插件是webpack的核心功能。
插件的目的是解决loader无法实现的其他事情。
使用方式:安装plugin的依赖,在plugins属性中new一个plugin即可。
文档中提供了一些官方维护的插件,下例使用其中之一 HtmlWebpackPlugin
演示此功能。
HtmlWebpackPlugin 的作用是打包构建后生成一份简单的html文件,并自动注入打包后的脚本文件。
1 | npm install html-webpack-plugin -D |
在webpack.config.js中,插件是以数组的形式定义。
先在文件头引入插件:
1 | const HtmlWebpackPlugin = require('html-webpack-plugin'); |
写入配置项:
1 | plugins: [ |
编译:
1 | npm run build |
这样的定义会使webpack使用现有的模板和文件名去生成html,打开后即可看到webpack已经为我们自动注入了脚本文件。
这是一个非常有用的插件,具有模块热替换的功能,当修改js时,会为我们自动应用更改到浏览器,免去了调试时频繁手动刷新浏览器的麻烦。
安装:
1 | npm install webpack-dev-server -D |
在package.json
中设置快捷cli命令hot
:
1 | "scripts": { |
在webpack.config.js
文件头部引入webpack
:
1 | const webpack = require('webpack'); |
然后在配置项中添加下面的字段,并且在plugins
中做如下增加:
1 | const config = { |
这样即可在项目中使用热更新插件:
1 | npm run hot |
留意控制台的输出,没有意外的话,你的项目会跑在 localhost:8080
,访问它就是了。然后修改你的js,你会发现HMR模块已经为我们自动更新。
针对不同的环境加载不同插件或执行特定的操作。
webpack支持以下两种模式:
要指定模式很简单:
1 | const config = { |
可以在普通脚本中通过访问process.env.NODE_ENV
变量来做不同的事情,比如这样:
1 | if(process.env.NODE_ENV === 'development'){ |
运行npm run dev
打包后,你将会得到你想要的结果。
你也许会注意到,在未指定mode
字段的时候,webpack会按照development
模式打包,并且在控制台反馈这一警告,指定后则不会出现。
如果你想让人通过互联网访问到你的博客,那么你有如下几种可能的选择:
推荐选择第三种方式,没别的,因为省钱。本文将介绍以此种方式来部署静态网站。
至此,如果你还没有GitHub账号,去申请一个吧!我保证你不会因此而少块肉的🙃
创建一个名为[你的用户名].github.io
的存储库。注意,你的存储库最好是这样的命名(当然你也可以去阅读相关的文档来折腾一下与众不同的方式)
执行下面的命令,开始无痛安装~~
1 | npm install --save hexo-deployer-git |
将你的公钥绑定在GitHub上,如果尚未生成公钥对,执行如下命令生成新的公钥对:
1 | ssh-keygen |
接下来控制台会和你对话,问你想要保存在哪里,想要设置什么密码等等,一路回车就好。这样,一切都是默认的设置了👌
如果你是Win系统,你将在如下目录找到生成的密钥文件id_rsa
和公钥文件id_rsa.pub
:
1 | C:\Users\[用户名]\.ssh |
在github点击你的头像,进入设置页;
找到SSH and GPG keys
,新建一个SSH key,将id_rsa.pub
中的内容复制到文本框中:
在站点配置文件_config.yml
中的末尾部分找到如下字段并设置:
1 | # Deployment |
注意:此处的#
号代表注释,deploy下属字段的缩进不可以修改(其他的也不行,因为这里的缩进是一种语法),否则会报错
在博客根目录下打开终端,输入命令进行部署:
1 | hexo cl |
过一段时间后,在浏览器中输入你的仓库名称,就能访问到你的博客了。
我们的博客至此已经部署成功!接下来的内容对于建站来讲并不是必需的,但能让人更容易、更安全地访问你的博客。
许多云服务商都有提供域名服务,没有域名的话可以前往购买。此处仅说明如何将自己的域名指向github page站点。
新建一个CNAME文件,向其中写入你的顶级域名,像这样:
1 | cocoonut.top |
该文件必须在你的站点仓库的根目录下。为了保证该文件在你每次部署后不被覆盖,你可以将它放在source
目录下
注意CNAME没有任何文件后缀名,你可以在github仓库中直接新建一个文件,然后再down下来修改
前往你的域名提供商网站,向DNS配置中增加2条CNAME
记录:
1 | @ CNAME XXXX.github.io |
将XXXX
替换为github你的用户名即可。
前者是让你的域名能通过 cocoonut.top 这种形式访问;
而后者是让你的域名能通过 www.cocoonut.top这种形式访问。
某些浏览器会把没有使用https的网页都标记为“不安全”,如国内某安全卫士旗下的子产品官网:
HTTPS 是基于 HTTP 协议的,不过它会使用 TLS/SSL 来对数据加密。使用 TLS/ SSL 协议,所有的信息都是加密的,第三方没有办法窃听。并且它提供了一种校验机制,信息一旦被篡改,通信的双方会立刻发现。它还配备了身份证书,防止身份被冒充(如中间人攻击)的情况出现。
使用HTTPS协议通信的数据都是加密的,会更加安全。
一般的网站若要支持https,需要向域名服务商申请证书,可能需要支付一定的费用。
我们使用的是GitHub的服务,虽然是国外的站点,但目前为止仍在GFW的白名单,你不需要为你的网站备案,而且github为自定义域名提供了这种服务,启用也非常简单:
在你的站点仓库下 -> settings 找到Custom domain,填入你的域名;
勾选Enforce HTTPS 选项。
设置后并不会立即生效。你可能需要等待数个小时
站点地图是记录了网站中所有超链接的xml文件,它能帮助搜索引擎等爬虫抓取网页。npm为Hexo提供了站点地图插件,可以很方便的生成站点地图文件。
安装插件
1 | npm install hexo-generator-sitemap --save |
在站点配置文件中添加
1 | sitemap: |
该插件会在你每次hexo g
时,在public
下生成sitmap.xml
文件。
Google需要验证你拥有该网站,关于验证方式你有多种选择,这里个人认为比较方便的是使用HTML标记:
修改主题配置文件,找到 google-site-verification
,值修改为 google 提供的 meta 中 content 的内容。
如果你没有在配置项中找到该内容,请查看主题目录下的_partials
->head.swig
中是否有如下内容,如果没有,请手动添加
然后重启、发布博客。回到Google searchConsole,点击验证按钮,然后提交站点地图。
提交站点地图后我们的网站还没有被抓取,要等搜索引擎下一次更新索引你才能在 google 上搜到,请耐心等待。
Hexo是一个快速、简洁且高效的静态博客框架。本文将介绍如何使用Hexo来搭建个人博客。
使用Hexo依赖于以下环境和工具:
安装过程相对简单,此处不再赘述,请自行RTFM
~
你可以使用如下命令来全局安装Hexo:
1 | npm install -g hexo-cli |
执行完上述命令后,可以使用下面的命令来确认是否安装成功:
1 | hexo -v |
如果返回版本号等信息,那么恭喜你,入了一个深坑完成了第一步!
创建项目目录并进入:
1 | mkdir myblog |
此处我建立了名为myblog的文件夹,你可以自定义名称哦~
请注意,后续所有操作默认在博客根目录下进行
初始化blog:
1 | hexo init |
至此,已经生成了基础的博客框架,先查看一下目录结构:
1 | · |
在本地启动预览:
1 | hexo server |
执行完毕后,默认会在本地4000端口启动web程序:localhost:4000
如果默认的4000端口被占用,也没有关系,这条指令还可以附加参数:hexo s -p[端口号]
你也可以同时启动debug模式:hexo s -debug
在浏览器中你会看到它长这模样:
emmm默认的主题有点丑,请不要着急,咱先搭建起来,最后再捯饬好康的主题 ~
虽然Hexo帮我们写好了一篇,但接下来我们要亲手试着写一篇博客,毕竟意义不同嘛(ง •_•)ง
回到cli,接着上面的操作,我们需要按Ctrl
+C
先停止在本地运行的网站。新建一篇博客:
1 | hexo new "my first blog" |
你将看到在.\source\_posts\
目录下生成了一个名为my first blog.md
的文件,可以用记事本(或者你喜欢的任何编辑器)打开它来编写内容。
Hexo 支持使用流行的 Markdown 语法来撰写文章,请使用支持Markdown语法的编辑器或插件哦
接下来,清理一下数据库文件和public
文件夹,然后生成、预览:
1 | hexo cl |
如果你懂得如何通过阅读文档来学习,则会发现这些常用命令存在简写形式
yilia是一个简约美观的博客主题,我们就以此为例来说明如何更换。当然,除了github上开源的主题,官方也为我们提供了诸多选择。
下载主题到themes目录下
1 | git clone https://github.com/litten/hexo-theme-yilia themes/yilia |
等待执行完成后,你会在themes/yilia
下找到下载的内容。
在博客根目录下,找到_config.yml
文件,打开修改其theme
字段:
重新清除缓存、生成、启动预览即可看到效果。
根目录下和主题目录下都存在一个_config.yml
文件,前者被称为站点配置文件,后者被称为主题配置文件,绝大多数的内容可以在这里修改,你可以修改这些文件中参数来定制你的blog
至此,我们已经成功在本地搭建起了博客,这样当然还不够,我们建立博客更多是想要与人分享,圈地自萌怎么能行!为此我们有必要将博客部署在远端服务器上,并且能通过互联网访问。
请务必参考激动人心的部署篇!
]]>海量的信息都可以通过搜索引擎这只巨大的爬虫抓取到,学会高效使用搜索引擎是非常必要而且基础的技能,本文整理了一些常用的搜索姿势,熟练使用将很大程度提高你的工作和学习效率。
"Red Dead Redemption"
双引号表示完全匹配,结果中仅出现与搜索文本完全相同的内容
a -b
搜索包含a但不包含b的结果(注意a后面的空格不能省略)
长城防*墙
星号表示任意字符串
@something
搜索社群中的相关内容,如微博等
A OR B
在关键词A和B中间加OR,表示逻辑“或”操作,将返回包含有A或者B的内容,或者同时包含A与B
site:zhihu.com 西瓜
在相应的网站或域名前加上site:
,将只返回在该站点内的结果
需要注意的是,这些搜索技巧是可以相互组合使用的,这会让搜索结果更加趋近你想要的信息。如:site:zhihu.com *瓜 -西瓜
可以抓取知乎上关于各种瓜(除了西瓜)的故事🙃
difine:word
将返回word
的词汇定义或其相关文章
火龙果 filetype:ppt
将返回关键词为ppt格式的链接
intitle:象牙
将返回标题中含有关键字的结果
link:http://baidu.com
结果为包含此链接的页面
inurl:diygod
结果为URL中含有diygod的网址
1 | chrome://flags#enable-experimental-web-platform-features |
将选项设置为enabled
这样就可以开启实验中的特性了
]]>1 | hello world |
来回折腾,博客终于成功上线了。感谢DIYgod大佬开源的Sagiri主题。
纱雾很可爱,主题也是~~
]]>