Normal view

There are new articles available, click to refresh the page.
Before yesterdayMain stream

Manjaro Gnome 安装和配置记录

By: Ryan Wang
28 July 2021 at 13:10
╭─ryanwang at ryanwang-linux in ~
╰─○ neofetch
██████████████████  ████████   ryanwang@ryanwang-linux 
██████████████████  ████████   ----------------------- 
██████████████████  ████████   OS: Manjaro Linux x86_64 
██████████████████  ████████   Kernel: 5.10.70-1-MANJARO 
████████            ████████   Uptime: 10 hours, 29 mins 
████████  ████████  ████████   Packages: 1394 (pacman) 
████████  ████████  ████████   Shell: zsh 5.8 
████████  ████████  ████████   Resolution: 2560x1440 
████████  ████████  ████████   DE: GNOME 40.5 
████████  ████████  ████████   WM: Mutter 
████████  ████████  ████████   WM Theme: Adwaita-maia-compact-dark 
████████  ████████  ████████   Theme: Adwaita-maia-compact-dark [GTK2/3] 
████████  ████████  ████████   Icons: Papirus-Dark-Maia [GTK2/3] 
████████  ████████  ████████   Terminal: gnome-terminal 
                               CPU: Intel i5-10400 (12) @ 4.300GHz 
                               GPU: Intel CometLake-S GT2 [UHD Graphics 630] 
                               Memory: 12983MiB / 15424MiB

基础设定

检测并更换软件源:

sudo pacman-mirrors -i -c China -m rank

添加 archlinuxcn 的源:

sudo vim /etc/pacman.conf

追加如下配置:

[archlinuxcn]
SigLevel = Optional TrustedOnly
Server = https://mirrors.tuna.tsinghua.edu.cn/archlinuxcn/$arch
sudo pacman -S archlinuxcn-keyring

检查软件包更新:

sudo pacman -Syyu

常用开发工具包:

sudo pacman -S base-devel

常用软件包

常用终端工具:

sudo pacman -S htop vim tree neofetch

社区应用:

yay -S bitwarden spotify visual-studio-code-bin google-chrome github-desktop-bin com.qq.weixin.work.deepin com.qq.weixin.deepin typora telegram-desktop

输入法

最开始使用的是 fcitx5 + fcitx5-rime ,安装下来一切顺利。但是在某些场景下始终无法切换到中文输入法,不知道如何解决,然后换成了 ibus-rime。

sudo pacman -S ibus-rime
sudo vim /etc/profile.d/ibus.sh

写入:

export GTK_IM_MODULE="ibus"
export QT_IM_MODULE="ibus"
export XMODIFIERS="@im=ibus"

export XIM="ibus"
export XIM_PROGRAM="ibus"

按理来说,这时候重启或者重新登录即可生效,但是并没有,不仅无法通过快捷键(Super+Space)切换到中文输入法,而且菜单栏右侧也没有切换输入法的菜单项。后来在 @JohnNiang 的帮助下解决了此问题。解决方法:在系统设置里面添加 rime 输入法。如下图:

manjaro-keyboard-settings

rime 的配置目录位置:~/.config/ibus/rime/build

可根据自己的需求对 rime 进行定制化配置。

Terminal 配置

目前最新的 Manjaro 发行版已经默认配置了 zsh,但个人还是希望使用 ohmyzsh。和家里的 macOS 保持一致。

安装 ohmyzsh:

sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

安装所需插件:

cd ~/.oh-my-zsh/plugins

git clone https://github.com/zsh-users/zsh-syntax-highlighting

git clone https://github.com/zsh-users/zsh-autosuggestions

修改 .zshrc

ZSH_THEME="fino"

...

plugins=(
	git
	zsh-autosuggestions
	zsh-syntax-highlighting
)

Node.js 环境配置

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash

追加下面的配置到 .zshrc

export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

安装一个 Node.js 版本

nvm install v14.17.3

Clash

yay -S clash

配置目录位置:~/.config/clash

将 clash 配置文件(config.yaml)放置到此目录,然后启动即可:

nohup clash &

Gnome 插件

https://extensions.gnome.org/extension/2890/tray-icons-reloaded/ https://extensions.gnome.org/extension/1460/vitals/

总结

使用了两三天下来整体还是不错的,暂时还没遇到什么痛点,可能问题最大的还是在中文输入法的体验上吧。之前一直在开发环境使用 Deepin,在使用上没有什么大的问题,但感觉系统整体在 UI 和交互上对于我来说存在较大问题。Deepin 就是属于那种远看界面还不错,但是近看却经不起推敲。个人不是特别建议。而且对于一个小前端开发来说,目前所需要的软件包都可以在官方源或者社区源(aur)找到。所以目前来说,Manjaro 应该是除了 macOS,我最佳的选择。

参考

记录优化 Vue 应用的首次加载速度

By: Ryan Wang
13 January 2020 at 12:32

2024 年更新

不再推荐用这种偏门的方式去优化网络加载,这非常不可靠。Halo 2.x 也已经完全没有使用这种方式。正确的做法应该是在工程和代码层面优化,比如分包、异步加载路由、缓存策略、SSR 等。一定要上 CDN,也应该是从基础设施运维上面考虑。

感谢评论区的 @Yttrium 提醒更新。


Halo 的管理端使用的是 Vue 来构建的,随之收到不少反馈后台加载过于缓慢,其主要原因就是打包好的 Vue 应用的静态资源又多又大,可能同时就几十个请求,这对于一些小水管的服务器来说简直是致命的打击。

2e4f1d9d99910ce0933230d0c79d309c

解决办法

使用公共 cdn,我们只需要把打包好的静态资源丢在公共 cdn 上引用就好了。那么如何优雅的上传到公共 cdn 呢?

创建 .env.env.development

.env

NODE_ENV=production
// VERSION 需要和 package.json 的 version 一致。
PUBLIC_PATH=https://cdn.jsdelivr.net/npm/halo-admin@VERSION/dist/

.env.development

NODE_ENV=development
PUBLIC_PATH=/

修改 vue.config.js

module.exports = {
	publicPath: process.env.PUBLIC_PATH,
}

打包测试

可以在 dist/index.html 看到,所有静态资源的根路径已经变成了 https://cdn.jsdelivr.net/npm/halo-admin@VERSION/dist/

上传到 npmjs

npm login

npm init

npm publish

说明

  1. 每次发布版本前,需要修改 .envpackage.json 的版本号,且需要保持一致。
  2. 发布到 npmjs 前,需要先 npm run build
  3. 经过这些操作之后,只需要部署 dist/index.html 即可,其他静态资源无用,因为是走的 jsdelivr 的 cdn。
  4. 只建议个人小应用使用这种方式,其他类型应用请自行斟酌,毕竟上传到 npmjs 会上传项目代码。
  5. 过程描述的过于简单,仅做为记录,非教程。

相关链接

博客迁移到 Raspberry Pi

By: Ryan Wang
23 December 2019 at 19:40

注:经过一段时间的折腾,已经放弃运行到树莓派了,其主要原因是因为家里网络质量一言难尽。

本着爱折腾之心,今天将博客搬到了吃灰已久的 Raspberry Pi 3B+。好吧,其实也是之前一个热心的网友送了我一年哲西云的内网穿透,一直没用,所以秉承着中华人民拒绝浪费的美好传统,折腾开始了...

配置

    .',;:cc;,'.    .,;::c:,,.    root@raspberrypi
   ,ooolcloooo:  'oooooccloo:    OS: Raspbian 10 buster
   .looooc;;:ol  :oc;;:ooooo'    Kernel: armv7l Linux 4.19.75-v7+
     ;oooooo:      ,ooooooc.     Uptime: 4h 4m
       .,:;'.       .;:;'.       Packages: 588
       .... ..'''''. ....        Shell: 5295
     .''.   ..'''''.  ..''.      CPU: ARMv7 rev 4 (v7l) @ 1.4GHz
     ..  .....    .....  ..      RAM: 386MiB / 926MiB
    .  .'''''''  .''''''.  .
  .'' .''''''''  .'''''''. ''.
  '''  '''''''    .''''''  '''
  .'    ........... ...    .'.
    ....    ''''''''.   .''.
    '''''.  ''''''''. .'''''
     '''''.  .'''''. .'''''.
      ..''.     .    .''..
            .'''''''
             ......

也就那样儿吧~

烧录镜像

这次搭建博客使用的镜像是官方的 Raspbian Buster Lite,之所以没选 Desktop,因为那玩意儿就是个玩具,没有实际用途,鹅且也不会用它,倒不如节省点内存。

进入官网 https://www.raspberrypi.org/downloads/raspbian ,找到 Raspbian Buster Lite,选择 Download ZIP

解压下载好的镜像得到 xxxx-xx-xx-raspbian-buster-lite.img

使用 Etcher 烧录镜像。当然,也有很多其他的烧录工具。

开启 SSH

这一步很简单,在烧录好的 SD 卡中,新建一个空白的 ssh 文件即可,需要注意的是,这个文件没有后缀,别搞个 ssh.txtssh.avi 啥的。

启动

插上 SD 和电源直接启动即可,默认用户名 pi,默认密码 raspberry,切换到 root 账户,sudo su root

环境配置

Java

sudo apt-get install openjdk-8-jre-headless
sudo apt-get install openjdk-8-jre

Vim

sudo apt-get install vim

Git

sudo apt-get install git

迁移数据

下载安装包

wget http://halo.ryanc.cc/release/halo-latest.jar -O halo-latest.jar

拉取备份的数据

git clone git@github.com:ruibaby/blog-data.git .halo

启动 Halo

java -jar halo-latest.jar

测试没问题,再配置 systemd 进行管理,教程:https://halo.run/guide/install/install-with-linux.html#%E8%BF%9B%E9%98%B6%E9%85%8D%E7%BD%AE

域名解析

由于我是直接是用的 又拍云 CDN 进行回源,所以也不需要安装 Nginx 啥的了,这个内网穿透服务提供了一个 CNAME,去解析一下就完事了。

哲西云

如有需要,可以去 http://www.zhexi.tech 体验体验。优惠码 GRRVFM

展示

56ffb0f522663785f4b031d595c1f6a0

d15419a817ec66336297bd8e08157508

758cfbd207c38b9db27a6bba295618a2

9e22bcea8ac55cd0c8a82d2c49b083c8

87e60eb23320ee7c00fb5ed66942f631

Flarum 的安装与配置

By: Ryan Wang
18 November 2019 at 20:30

Flarum 是一款非常棒的开源论坛程序,Halo 的论坛 就是用 Flarum 搭建的。之前有人问过我 Flarum 如何搭建,所以下面讲一下 Flarum 的搭建过程(btw,官方的搭建教程实在草率)。

前提

  • 域名需要提前解析。

  • 注意服务器是否需要备案,如果没备案,会被 x 掉。

  • 有一定的 Linux 基础。

环境说明

  • Linux Server(本文是用的 CentOS 7.6)

  • Apache 或者 Nginx(本文是用的 Nginx)

  • PHP 7.1+

  • PHP 拓展: curl, dom, gd, json, mbstring, openssl, pdo_mysql, tokenizer, zip, fileinfo

  • MySQL 5.6+ 或者 MariaDB 10.0.5+

部署环境安装

更新服务器软件包

yum update -y

安装 Nginx/PHP/MySQL

这里我们使用 OneinStack 一键安装,人生苦短,懒得自己编译了。当然,如果有时间,根据需求自己编译安装更好。

2024 年更新,OneinStack 被曝包含恶意代码,请谨慎使用。
https://github.com/oneinstack/oneinstack/issues/511

image.png

如上图,选择好需要的软件以及版本后,复制安装命令到服务器执行就行了,安装过程可能会有点慢,耐心等待就行了。

需要注意的是,PHP 扩展中的 fileinfo 一定要勾选,Flarum 官方文档居然没有写需要这个扩展。(没错,这里我被坑了,嘤嘤嘤嘤~)

安装完成应该会打印出这些东西:
image.png

安装 Composer

php -r "copy('https://install.phpcomposer.com/installer', 'composer-setup.php');"

php composer-setup.php

php -r "unlink('composer-setup.php');"

mv composer.phar /usr/local/bin/composer

由于 Composer 的服务器在国外,可能导致下载 Flarum 已经依赖包会很慢,所以我们需要更换一下源地址。至于 Composer 是啥,其实就是 PHP 的一个包管理,类似 Java 的 MavenGradle 工具。

composer config -g repo.packagist composer https://packagist.phpcomposer.com

安装 Flarum

进入到 oneinstack 目录,执行 vhost.sh 脚本新建一个网站
image.png

然后会提示 SSL 证书选项,网站目录之类的东西,按照自己的需求选择即可。

创建完成后应该是这样子。

image.png

然后进入网站目录执行:

composer create-project flarum/flarum . --stability=beta

更新,现在 Flarum 已经发布正式版,请使用下面的命令安装:

composer create-project flarum/flarum .

然后等待下载 Flarum 以及对应的依赖即可,安装完成应该是这个样子的:

image.png

配置运行

上面其实就已经安装好了 Flarum,但是还需要进一步配置才能正确运行。

创建数据库

登陆 MySQL:

mysql -u root -p密码

创建数据库:

create database 数据库名 character set utf8mb4 collate utf8mb4_bin;

这里的字符集一定要是 utf8mb4,至于为什么是 utf8mb4,参考:https://www.jianshu.com/p/6967ce16a202

修改 Nginx 配置

进入 Nginx 配置文件目录:

cd /usr/local/nginx/conf/vhost

修改网站的配置文件:

vim xxx.conf

需要修改的地方:

  1. root:需要在路径后面加上 public,比如我的原本是 root /data/wwwroot/bbs.ryanwang.me;,需要修改为 root /data/wwwroot/bbs.ryanwang.me/public;

  2. 引入 Flarum 提供的配置,在 server 大括号中任意位置加上 include /data/wwwroot/xxx/.nginx.conf;xxx 为网站目录名。比如我的是 include /data/wwwroot/bbs.ryanwang.me/.nginx.conf;

最后的配置示例:

server {
  listen 80;
  listen 443 ssl http2;
  ssl_certificate /usr/local/nginx/conf/ssl/bbs.ryanwang.me.crt;
  ssl_certificate_key /usr/local/nginx/conf/ssl/bbs.ryanwang.me.key;
  ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
  ssl_ciphers TLS13-AES-256-GCM-SHA384:TLS13-CHACHA20-POLY1305-SHA256:TLS13-AES-128-GCM-SHA256:TLS13-AES-128-CCM-8-SHA256:TLS13-AES-128-CCM-SHA256:EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
  ssl_prefer_server_ciphers on;
  ssl_session_timeout 10m;
  ssl_session_cache builtin:1000 shared:SSL:10m;
  ssl_buffer_size 1400;
  add_header Strict-Transport-Security max-age=15768000;
  ssl_stapling on;
  ssl_stapling_verify on;
  server_name bbs.ryanwang.me;
  access_log /data/wwwlogs/bbs.ryanwang.me_nginx.log combined;
  index index.html index.htm index.php;
  root /data/wwwroot/bbs.ryanwang.me/public;
  if ($ssl_protocol = "") { return 301 https://$host$request_uri; }

  include /usr/local/nginx/conf/rewrite/other.conf;
  #error_page 404 /404.html;
  #error_page 502 /502.html;

  location ~ [^/]\.php(/|$) {
    #fastcgi_pass remote_php_ip:9000;
    fastcgi_pass unix:/dev/shm/php-cgi.sock;
    fastcgi_index index.php;
    include fastcgi.conf;
  }

  location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|flv|mp4|ico)$ {
    expires 30d;
    access_log off;
  }
  location ~ .*\.(js|css)?$ {
    expires 7d;
    access_log off;
  }
  location ~ /(\.user\.ini|\.ht|\.git|\.svn|\.project|LICENSE|README\.md) {
    deny all;
  }
  include /data/wwwroot/bbs.ryanwang.me/.nginx.conf;
}

最后我们需要检查 Nginx 配置是否有误并重载 Nginx 配置:

nginx -t

nginx: the configuration file /usr/local/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/nginx/conf/nginx.conf test is successful
nginx -s reload

Flarum 安装引导

如果出现下面的情况:

image

是因为没有对网站目录写入的权限,我们加一下权限即可:

# xxx 为网站目录名称
chmod -R 777 /data/wwwroot/xxx

然后刷新页面就可以看到安装表单了。

image.png

然后填写数据库信息以及管理员信息,点击安装即可。

安装部署部分到此结束。

常用插件安装

安装完成后会发现不支持中文,所以我们需要安装中文语言包。还有一些常用的插件。

进入网站目录:

# xxx 为网站目录名称
cd /data/wwwroot/xxx
# 简体中文语言包
composer require csineneo/lang-simplified-chinese

# 繁体中文语言包
composer require csineneo/lang-traditional-chinese

# 编辑器 Emoji 表情选择框
composer require clarkwinkelmann/flarum-ext-emojionearea

# Sitemap 生成器
composer require flagrow/sitemap

# Fancybox 插件
composer require squeevee/flarum-ext-fancybox 

安装完成后去后台启用即可(后台地址:网址/admin)。

image.png

❌
❌