index.xml

<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>A Technical Blog</title>
        <link>https://www.gagua.xyz/</link>
        <description>Recent content on A Technical Blog</description>
        <generator>Hugo -- gohugo.io</generator>
        <language>en-us</language>
        <lastBuildDate>Tue, 11 May 2021 00:00:00 +0000</lastBuildDate><atom:link href="https://www.gagua.xyz/index.xml" rel="self" type="application/rss+xml" /><item>
        <title>Uvicorn ANSI Color Error In Pycharm Terminal</title>
        <link>https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/</link>
        <pubDate>Tue, 11 May 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/</guid>
        <description>&lt;h1 id=&#34;origin&#34;&gt;Origin&lt;/h1&gt;
&lt;p&gt;Recently I&amp;rsquo;m learning &lt;a class=&#34;link&#34; href=&#34;https://fastapi.tiangolo.com/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;FastAPI&lt;/a&gt; wanting to develop a  JSON API based backend server which using Uvicorn
as ASGI server. Previously I usually used VSCode to writing python script, but this time I&amp;rsquo;d like to build a slightly bigger project
so I turned to &lt;a class=&#34;link&#34; href=&#34;https://www.jetbrains.com/zh-cn/pycharm/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Pycharm&lt;/a&gt; to build FastAPI application.&lt;/p&gt;
&lt;h2 id=&#34;uvicorn&#34;&gt;Uvicorn&lt;/h2&gt;
&lt;p&gt;&lt;a class=&#34;link&#34; href=&#34;https://github.com/encode/uvicorn&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Uvicorn&lt;/a&gt; is a lightning-fast ASGI server implementation, using uvloop and httptools.&lt;/p&gt;
&lt;h3 id=&#34;error&#34;&gt;ERROR&lt;/h3&gt;
&lt;p&gt;When I ran FastAPI application with &lt;code&gt;uvicorn.exe sql_app.main:app&lt;/code&gt; I got into a weird trouble:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;$ uvicorn.exe sql_app.main:app
?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Started server process &lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;36m15204?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt;
?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Waiting &lt;span class=&#34;k&#34;&gt;for&lt;/span&gt; application startup.
?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Application startup complete.
?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Uvicorn running on ?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;1mhttp://127.0.0.1:8000?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m &lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;Press CTRL+C to quit&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;
?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Shutting down
?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Waiting &lt;span class=&#34;k&#34;&gt;for&lt;/span&gt; application shutdown.
?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Application shutdown complete.
?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Finished server process &lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;36m15204?&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;There are some unexpected code in Uvicorn starting log. Then I opened the same folder with VScode, the
results looks like:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;&lt;span style=&#34;color: green;&#34;&gt;INFO:&lt;/span&gt;   Started server process [&lt;span style=&#34;color: Cyan;&#34;&gt;5536&lt;/span&gt;]&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;It makes me feel puzzled, then searched the Pycharm settings about color and terminal but didn&amp;rsquo;t get any result.&lt;/p&gt;
&lt;h3 id=&#34;different-shells&#34;&gt;Different Shells&lt;/h3&gt;
&lt;p&gt;Maybe I chose the wrong shell for Pycharm so that I tested Different Shells. Importantly, I&amp;rsquo;m using Windows platform.&lt;/p&gt;
&lt;dl&gt;
&lt;dt&gt;&lt;strong&gt;Git-bash.exe&lt;/strong&gt;:&lt;/dt&gt;
&lt;dd&gt;render colors correctly but need to open a new window&lt;/dd&gt;
&lt;dt&gt;&lt;strong&gt;bin\bash.exe:&lt;/strong&gt;&lt;/dt&gt;
&lt;dd&gt;render error code in Pycharm terminal&lt;/dd&gt;
&lt;dt&gt;&lt;strong&gt;PowerShell&lt;/strong&gt;:&lt;/dt&gt;
&lt;dd&gt;render error code in Pycharm terminal&lt;/dd&gt;
&lt;/dl&gt;
&lt;p&gt;Now, I&amp;rsquo;m suspicious of Pycharm terminal. So I opened them independently (out of Pycharm) and run Uvicorn command.&lt;/p&gt;
&lt;p&gt;bash.exe:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;$ uvicorn.exe sql_app.main:app
&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Started server process &lt;span class=&#34;o&#34;&gt;[[&lt;/span&gt;36m15060&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt;
&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Waiting &lt;span class=&#34;k&#34;&gt;for&lt;/span&gt; application startup.
&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Application startup complete.
&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Uvicorn running on &lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;1mhttp://127.0.0.1:8000&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m &lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;Press CTRL+C to quit&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;PowerShell:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;$ uvicorn.exe sql_app.main:app
&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Started server process &lt;span class=&#34;o&#34;&gt;[[&lt;/span&gt;36m13668&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt;
&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Waiting &lt;span class=&#34;k&#34;&gt;for&lt;/span&gt; application startup.
&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Application startup complete.
&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;32mINFO&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m:     Uvicorn running on &lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;1mhttp://127.0.0.1:8000&lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;0m &lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;Press CTRL+C to quit&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;&lt;strong&gt;Git-bash.exe&lt;/strong&gt; runs without error code however it&amp;rsquo;s just plain text without colors&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;$ uvicorn.exe sql_app.main:app
INFO:     Started server process &lt;span class=&#34;o&#34;&gt;[&lt;/span&gt;12864&lt;span class=&#34;o&#34;&gt;]&lt;/span&gt;
INFO:     Waiting &lt;span class=&#34;k&#34;&gt;for&lt;/span&gt; application startup.
INFO:     Application startup complete.
INFO:     Uvicorn running on http://127.0.0.1:8000 &lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;Press CTRL+C to quit&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h3 id=&#34;uvicorns-issue&#34;&gt;Uvicorn&amp;rsquo;s Issue&lt;/h3&gt;
&lt;p&gt;After Googled for this kind of strange behavior, I found an &lt;a class=&#34;link&#34; href=&#34;https://github.com/tiangolo/fastapi/issues/815&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;issue opened on FastAPI page&lt;/a&gt; which is related to &lt;a class=&#34;link&#34; href=&#34;https://github.com/encode/uvicorn/pull/542&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;uvicorn&amp;rsquo;s bug&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;That bug seems caused by color escaping error on windows, and &lt;em&gt;euri10&lt;/em&gt; created a pull request which add &lt;code&gt;click.clear()&lt;/code&gt; on &lt;strong&gt;logging.py&lt;/strong&gt; to fix the bug. However, this line disappeared at official Uvicorn repository and the package I downloaded. Despite it actually &lt;em&gt;works&lt;/em&gt;, I think modify the package hardcode by myself is not an elegant solution.&lt;/p&gt;
&lt;h2 id=&#34;ansi-escape-code&#34;&gt;ANSI Escape Code&lt;/h2&gt;
&lt;p&gt;After spending a lot of time searching for that issue, I finally got some clues about it.&lt;/p&gt;
&lt;p&gt;ANSI escape sequences are a standard for in-band signaling to control cursor location, color, font styling, and other options on video text terminals and &lt;strong&gt;terminal emulators&lt;/strong&gt;.
&lt;code&gt;[32mINFO[0m:&lt;/code&gt; is equivalent to &lt;code&gt;\e[32mINFO\e[0m&lt;/code&gt; which will display &lt;span style=&#34;color: green;&#34;&gt;INFO&lt;/span&gt; on terminal. &lt;code&gt;\e&lt;/code&gt; means &lt;em&gt;escaping&lt;/em&gt;, &lt;code&gt;[32m&lt;/code&gt; means green foreground and &lt;code&gt;[0m&lt;/code&gt; reset the escape color code.&lt;/p&gt;
&lt;h3 id=&#34;windows-terminalhttpsdocsmicrosoftcomzh-cnwindowsterminalget-started&#34;&gt;&lt;a class=&#34;link&#34; href=&#34;https://docs.microsoft.com/zh-cn/windows/terminal/get-started&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Windows Terminal&lt;/a&gt;&lt;/h3&gt;
&lt;p&gt;Installed Windows terminal at Microsoft store, then I tried launching Uvicorn with windows terminal. To my surprise, &lt;strong&gt;both powershell and gitbash&lt;/strong&gt; rendered colorful Uvicorn&amp;rsquo;s starting log on terminal.&lt;/p&gt;
&lt;p&gt;&lt;figure style=&#34;flex-grow: 368; flex-basis: 884px&#34;&gt;
		&lt;a href=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/Gitbash_uvicorn.png&#34; data-size=&#34;722x196&#34;&gt;&lt;img src=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/Gitbash_uvicorn.png&#34;
				srcset=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/Gitbash_uvicorn_hud52419d6d550249d073264309dccc3e4_24068_480x0_resize_box_2.png 480w, https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/Gitbash_uvicorn_hud52419d6d550249d073264309dccc3e4_24068_1024x0_resize_box_2.png 1024w&#34;
				width=&#34;722&#34;
				height=&#34;196&#34;
				loading=&#34;lazy&#34;
				alt=&#34;run Uvicorn with git-bash.exe on windows terminal &#34;&gt;
		&lt;/a&gt;
		
		&lt;figcaption&gt;run Uvicorn with git-bash.exe on windows terminal&lt;/figcaption&gt;
		
	&lt;/figure&gt;&lt;/p&gt;
&lt;h3 id=&#34;strange-behavior&#34;&gt;Strange Behavior&lt;/h3&gt;
&lt;p&gt;then I tried running &lt;code&gt;echo -e &amp;quot;\e[37;44;3;1mLYL\e[0m&amp;quot;&lt;/code&gt; on different terminal with different shell, this code expected white italic &amp;ldquo;LYL&amp;rdquo; text with blue background looks like: &lt;span style=&#34;color: white;font-style: italic; background: blue&#34;&gt;LYL&lt;span&gt;&lt;/p&gt;
&lt;p&gt;On windows terminal platform print with correct format:
&lt;figure style=&#34;flex-grow: 1174; flex-basis: 2818px&#34;&gt;
		&lt;a href=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/windows_terminal_gitbash.png&#34; data-size=&#34;728x62&#34;&gt;&lt;img src=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/windows_terminal_gitbash.png&#34;
				srcset=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/windows_terminal_gitbash_hu9b02bfbabace5483a6895d7cdda2c428_3030_480x0_resize_box_2.png 480w, https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/windows_terminal_gitbash_hu9b02bfbabace5483a6895d7cdda2c428_3030_1024x0_resize_box_2.png 1024w&#34;
				width=&#34;728&#34;
				height=&#34;62&#34;
				loading=&#34;lazy&#34;
				alt=&#34;render escape code on windows terminal&#34;&gt;
		&lt;/a&gt;
		
		&lt;figcaption&gt;render escape code on windows terminal&lt;/figcaption&gt;
		
	&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;but bash.exe can&amp;rsquo;t render italic text:
&lt;figure style=&#34;flex-grow: 736; flex-basis: 1768px&#34;&gt;
		&lt;a href=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/bash_alone.png&#34; data-size=&#34;339x46&#34;&gt;&lt;img src=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/bash_alone.png&#34;
				srcset=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/bash_alone_hubcf7dd4b31479c27d9b3b276f3467630_1133_480x0_resize_box_2.png 480w, https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/bash_alone_hubcf7dd4b31479c27d9b3b276f3467630_1133_1024x0_resize_box_2.png 1024w&#34;
				width=&#34;339&#34;
				height=&#34;46&#34;
				loading=&#34;lazy&#34;
				alt=&#34;bash.exe alone&#34;&gt;
		&lt;/a&gt;
		
		&lt;figcaption&gt;bash.exe alone&lt;/figcaption&gt;
		
	&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;git-bash.exe have completely correct format, and run with &lt;code&gt;--use-colors&lt;/code&gt; parameter has colorful log output:
&lt;figure style=&#34;flex-grow: 362; flex-basis: 870px&#34;&gt;
		&lt;a href=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/git-bash-use-color.png&#34; data-size=&#34;526x145&#34;&gt;&lt;img src=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/git-bash-use-color.png&#34;
				srcset=&#34;https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/git-bash-use-color_hu07c94afd42171bde551223936c7feafa_12147_480x0_resize_box_2.png 480w, https://www.gagua.xyz/p/uvicorn-ansi-color-error-in-pycharm-terminal/images/git-bash-use-color_hu07c94afd42171bde551223936c7feafa_12147_1024x0_resize_box_2.png 1024w&#34;
				width=&#34;526&#34;
				height=&#34;145&#34;
				loading=&#34;lazy&#34;
				alt=&#34;git-bash with parameter&#34;&gt;
		&lt;/a&gt;
		
		&lt;figcaption&gt;git-bash with parameter&lt;/figcaption&gt;
		
	&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;And I tried setting Pycharm terminal&amp;rsquo;s shell as &lt;em&gt;git-bash.exe&lt;/em&gt; which will have wonderful formatted log, with only one drawback: a seperate window.&lt;/p&gt;
&lt;h2 id=&#34;conclusion&#34;&gt;Conclusion&lt;/h2&gt;
&lt;p&gt;Different terminals or terminal emulators have different behaviors, that makes me frustrating, I finally couldn&amp;rsquo;t find a perfect solution about this problem.&lt;/p&gt;
&lt;p&gt;&lt;a class=&#34;link&#34; href=&#34;https://www.jetbrains.com/help/pycharm/terminal-emulator.html&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Pycharm integrated terminal &lt;/a&gt; as an embedded terminal emulator, it has it&amp;rsquo;s own exclusive manifestation. As a non-ANSI-aware terminal it has intrinsic flaw. VsCode might be a better solution?&lt;/p&gt;
</description>
        </item>
        <item>
        <title>Axios With Typescript</title>
        <link>https://www.gagua.xyz/p/axios-with-typescript/</link>
        <pubDate>Sat, 17 Apr 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/axios-with-typescript/</guid>
        <description>&lt;h1 id=&#34;refactor-with-typescript&#34;&gt;Refactor With Typescript&lt;/h1&gt;
&lt;p&gt;最近跟着b站上的视频用vue构建了一个移动版的商城项目，算是初步了解了vue全家桶的用法。不过这个项目是用javascript写的，所以就想用typescript重构，也算是一次项目实践，不用写ui只用写逻辑应该比较轻松。&lt;/p&gt;
&lt;h2 id=&#34;typescripthttpswwwtypescriptlangorg&#34;&gt;&lt;a class=&#34;link&#34; href=&#34;https://www.typescriptlang.org/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Typescript&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;javascript由于某些历史原因，设计上存在着一些糟粕，并且作为弱类型语言常常由于隐式的类型转换而产生一些运行时的bug，在编写过程中难以发觉，错误发生后也难以定位(debug)。没有类型系统的话，对于编辑器来说也不够友好，跳转和定义并不方便。因此微软开发了typescript，完全兼容javascript，没有限定运行时，完全开源，可以将其当作带有类型系统的js。最妙的是ts和js并非是二元对立的选择，而是渐进式的。&lt;/p&gt;
&lt;h2 id=&#34;axioshttpsgithubcomaxiosaxios&#34;&gt;&lt;a class=&#34;link&#34; href=&#34;https://github.com/axios/axios&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Axios&lt;/a&gt;&lt;/h2&gt;
&lt;p&gt;Axios是一个http请求库，是&lt;abbr title=&#34;xmlHttpRequest&#34;&gt;XHR&lt;/abbr&gt;的Promise实现，将其封装后用于网络请求。&lt;/p&gt;
&lt;h3 id=&#34;axiosresponse&#34;&gt;AxiosResponse&lt;/h3&gt;
&lt;p&gt;尽管TS已经有官方类型，但是在用TS重构项目时还是发生了问题，
主要在于封装过程中采用响应拦截器封装request请求，使得直接返回了&lt;code&gt;res=&amp;gt;res.data&lt;/code&gt;，而在使用封装完毕的请求方法时，&lt;/p&gt;
&lt;pre&gt;&lt;code class=&#34;language-{typescript}&#34; data-lang=&#34;{typescript}&#34;&gt;Promise().then(res:AxiosResponse&amp;lt;data&amp;gt; =&amp;gt; {
  res.filed
})
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;会发现TS报错字段&lt;code&gt;filed&lt;/code&gt;不存在，这是因为&lt;em&gt;AxiosResponse&lt;/em&gt;的类型定义中并不存在这个字段，而必须在&lt;em&gt;data&lt;/em&gt;字段中寻找。而如果采用另外的一种方式，即：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&#34;language-{typescript}&#34; data-lang=&#34;{typescript}&#34;&gt;Promise().then(res:AxiosResponse&amp;lt;data&amp;gt; =&amp;gt; {
  res.data.filed
})
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;却会发现尽管字段不报错，但是TS报错&lt;code&gt;AxiosResponse&amp;lt;data&amp;gt;无法赋值给AxiosResponse&amp;lt;any&amp;gt;&lt;/code&gt;。
google搜索后找到了Axios官方库中的一个&lt;a class=&#34;link&#34; href=&#34;https://github.com/axios/axios/issues/1510&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;issue&lt;/a&gt;，不过个人能力有限，就算看完了这个也没想到什么好的解决方法。因为AxiosResponse的&lt;strong&gt;data&lt;/strong&gt;字段本身没有给出特定的接口，而是采用泛型来实现，想在函数调用之前就设定接口，但是这样修改的也只是AxiosPromise，似乎无法在根本上解决问题。&lt;/p&gt;
&lt;h3 id=&#34;discard-interceptor&#34;&gt;Discard interceptor&lt;/h3&gt;
&lt;p&gt;最后我决定妥协，即放弃在拦截器中采用&lt;code&gt;res=&amp;gt;res.data&lt;/code&gt;的方式，而在调用获取数据后额外加上data字段。虽然麻烦了一点点但是毕竟问题解决了。
仔细一想，其实封装时在拦截器直接返回data似乎并不是一个良好的方式，毕竟返回数据其实还有config，header等重要的元数据信息，如果贸然把这些数据丢弃，对于类型安全并不可靠，也不利于之后功能的扩展。&lt;/p&gt;
</description>
        </item>
        <item>
        <title>Vue Router:The Front-End Routing </title>
        <link>https://www.gagua.xyz/p/vue-routerthe-front-end-routing/</link>
        <pubDate>Fri, 12 Mar 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/vue-routerthe-front-end-routing/</guid>
        <description>&lt;h1 id=&#34;router&#34;&gt;Router&lt;/h1&gt;
&lt;p&gt;最近在学习&lt;a class=&#34;link&#34; href=&#34;https://v3.vuejs.org/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Vue&lt;/a&gt;这个前端框架&lt;sup id=&#34;fnref:1&#34;&gt;&lt;a href=&#34;#fn:1&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;1&lt;/a&gt;&lt;/sup&gt;，看到Routing这一节时觉得很费解，不明白为什么要弄一套Vue router库。&lt;/p&gt;
&lt;p&gt;我认为所谓&lt;strong&gt;路由&lt;/strong&gt;，应该就是指URL跳转到对应的页面的一个映射方法。&lt;/p&gt;
&lt;h2 id=&#34;nginx&#34;&gt;Nginx&lt;/h2&gt;
&lt;p&gt;在nginx中可以通过配置文件来进行路由设定：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;location /path/ {
  root xxx;
  index xxx.html;
}
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;通过正则匹配来进行路由映射。&lt;/p&gt;
&lt;p&gt;既然已经有现成的路由方法了，为什么前端框架还是要自己弄一套新的路由方法呢？&lt;/p&gt;
&lt;h2 id=&#34;front-end-routing&#34;&gt;Front-End Routing&lt;/h2&gt;
&lt;p&gt;查阅之后，发现有前端和后端路由的区别，&lt;strong&gt;博客园&lt;/strong&gt;上的一篇&lt;a class=&#34;link&#34; href=&#34;https://www.cnblogs.com/songyao666/p/11470030.html&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;文章&lt;/a&gt;
让我对此稍微有了一点了解。&lt;/p&gt;
&lt;p&gt;总而言之，后端路由需要绑定methods，并且随着页面变得复杂，代码耦合性强，难以维护。前端路由应时而出，解决了页面切换白屏和可复用等问题，不过也使得SEO困难。&lt;/p&gt;
&lt;p&gt;通过js渲染界面：&lt;/p&gt;
&lt;pre&gt;&lt;code class=&#34;language-{html}&#34; data-lang=&#34;{html}&#34;&gt;&amp;lt;!DOCTYPE html&amp;gt;
&amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset=&amp;quot;UTF-8&amp;quot;&amp;gt;
  &amp;lt;title&amp;gt;Vue&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;div id=&amp;quot;app&amp;quot;&amp;gt;&amp;lt;/div&amp;gt;
  &amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;xxxx.xxx.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
  &amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;yyyy.yyy.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
  &amp;lt;script type=&amp;quot;text/javascript&amp;quot; src=&amp;quot;zzzz.zzz.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;前端路由有两种方式：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Hash模式&lt;/li&gt;
&lt;li&gt;History模式&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Hash模式利用的是浏览器不会对#号后面的路径对服务端发起路由请求，
而History模式利用的是HTML5的History API，所以不能兼容低版本IE。&lt;/p&gt;
&lt;h2 id=&#34;写在最后&#34;&gt;写在最后&lt;/h2&gt;
&lt;p&gt;从业经历不足半年在这还真是吃亏，古人说，以史为鉴可以知兴替。没有切身体会过前端的&lt;em&gt;古早&lt;/em&gt;时代的我，难以理解一些新的概念。曾经的我&lt;sup id=&#34;fnref:2&#34;&gt;&lt;a href=&#34;#fn:2&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;2&lt;/a&gt;&lt;/sup&gt;无法理解为什么要弄出Composition API，为什么会有IE的兼容问题，为什么要做状态管理，为什么要做前端路由。在ES6之前连模块导入这种概念都没有的Javascript是怎么成为浏览器运行时的事实标准的。&lt;/p&gt;
&lt;p&gt;不过这个又回到了一个有点接近哲学的问题，没有亲身体验过，人能了解事物的本质吗？如果说只有实践才能出真知，那么，实践的方法到底有哪些？实践的风险与收益如何平衡？人的有穷和事物的无穷，又该如何选择？&lt;/p&gt;
&lt;section class=&#34;footnotes&#34; role=&#34;doc-endnotes&#34;&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id=&#34;fn:1&#34; role=&#34;doc-endnote&#34;&gt;
&lt;p&gt;或者说Javascript库。 &lt;a href=&#34;#fnref:1&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&#34;fn:2&#34; role=&#34;doc-endnote&#34;&gt;
&lt;p&gt;也许现在我也只是以为我懂了。 &lt;a href=&#34;#fnref:2&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</description>
        </item>
        <item>
        <title>Fastx-Toolkit Install</title>
        <link>https://www.gagua.xyz/p/fastx-toolkit-install/</link>
        <pubDate>Tue, 09 Mar 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/fastx-toolkit-install/</guid>
        <description>&lt;h1 id=&#34;fastx-toolkit&#34;&gt;FASTX-Toolkit&lt;/h1&gt;
&lt;p&gt;记录一下&lt;a class=&#34;link&#34; href=&#34;http://hannonlab.cshl.edu/fastx_toolkit/download.html&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;FASTX-Toolkit&lt;/a&gt; 安装时遇到的坑。作为一款FASTQ/A短reads预处理软件，它也算是有些年头了，所以在现在的安装环境下难免会存在一些问题，这里就把遇到的这些问题记录下来，以示后人。&lt;/p&gt;
&lt;h2 id=&#34;install-libgtextutils&#34;&gt;install libgtextutils&lt;/h2&gt;
&lt;p&gt;这是一款用C和C++编写的软件，所以安装流程中可以选择通过源码安装，也可以选择通过预编译的二进制包安装。可以在&lt;a class=&#34;link&#34; href=&#34;http://hannonlab.cshl.edu/fastx_toolkit/download.html&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;冷泉港hannonlab实验室&lt;/a&gt;的官网上找到，不过预编译的二进制包只存在0.0.13的旧版本，所以这里选择通过源码安装。&lt;/p&gt;
&lt;p&gt;值得注意的是，FASTX-Toolkit&lt;strong&gt;依赖&lt;/strong&gt;于libgtextutils，所以选择先安装libgtextutils。解压后查看&lt;strong&gt;README&lt;/strong&gt;文件，然后转到&lt;strong&gt;INSTALL&lt;/strong&gt;文件查看安装方法，不过通常来说，C系列的软件安装都是三步走，即：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;&lt;code&gt;./configure&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;make&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;make install&lt;/code&gt;&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;对于有些软件来说可能略有不同，比如需要加上&lt;code&gt;make test&lt;/code&gt;检验安装是否完成，对于使用Cmake安装的，等以后有空再来研究吧。这里有个问题就是这种方法安装的软件怎么卸载呢？直接把安装文件夹给删了，总觉的很简单粗暴，但是也没见到有&lt;code&gt;make uninstall&lt;/code&gt;这个指令呀。&lt;/p&gt;
&lt;h3 id=&#34;prefix&#34;&gt;Prefix&lt;/h3&gt;
&lt;p&gt;这里就很奇怪了，明明INSTALL文件夹里提到了默认文件夹可以用以上三个步骤，但我重复之后会发现奇奇怪怪的Bug，显示安装已经完成但是却找不到&lt;em&gt;libgtextutils&lt;/em&gt;这个依赖项。后面才发现，手动指定文件夹路径就不会有问题了。&lt;code&gt;./configure --prefix=/PATH/TO/INSTALL&lt;/code&gt;，值得注意的是，这里的路径要采用绝对路径，不能用&lt;code&gt;~&lt;/code&gt;指代根目录，说实话让人觉得非常不习惯。&lt;/p&gt;
&lt;h3 id=&#34;heading&#34;&gt;&lt;/h3&gt;
&lt;p&gt;在&lt;strong&gt;make&lt;/strong&gt;步骤中，会发生一些麻烦，比如说&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;text_line_reader.cpp
...
return input_stream() ;
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;这个是由于GCC版本导致的问题，如果大于4.8.5就会报错&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;gcc --version
x86_64-conda-linux-gnu-gcc (crosstool-NG 1.24.0.133_b0863d8_dirty) 7.5.0
Copyright (C) 2017 Free Software Foundation, Inc.
This is free software; see the source for copying conditions.  There is NO
warranty; not even for MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;可以考虑降低GCC版本到要求或者修改&lt;code&gt;text_line_reader.cpp&lt;/code&gt;文件&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;return input_stream.good() ;
&lt;/code&gt;&lt;/pre&gt;&lt;h2 id=&#34;install-fastx-toolkit&#34;&gt;install FASTX-Toolkit&lt;/h2&gt;
&lt;p&gt;安装完成后用同样的方法尝试安装FASTX-Toolkit，这时会在第一步生成配置文件时就发现问题，不过这个很容易解决，按照错误提示:&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;vi ~/.bashrc
export PKG_CONFIG_PATH=/PATH/TO/INSTALL/lib/pkgconfig
source ~/.bashrc
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;出现这种问题的原因是，找不到包的依赖路径，不过这个我很不理解为什么安装的时候不会自动添加进环境变量。手动配置总感觉很麻烦。&lt;/p&gt;
&lt;p&gt;继续安装，这时候又会在make阶段发生问题&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;fasta_formatter.cpp: In function &#39;void parse_command_line(int, char**)&#39;:
fasta_formatter.cpp:105:9: error: this statement may fall through [-Werror=implicit-fallthrough=]
    usage();
    ~~~~~^~
fasta_formatter.cpp:107:3: note: here
   case &#39;i&#39;:
   ^~~~
cc1plus: all warnings being treated as errors
make[3]: *** [Makefile:425: fasta_formatter.o] Error 1
make[3]: Leaving directory &#39;/home/wangy/fastx_toolkit-0.0.14/src/fasta_formatter&#39;
make[2]: *** [Makefile:373: all-recursive] Error 1
make[2]: Leaving directory &#39;/home/wangy/fastx_toolkit-0.0.14/src&#39;
make[1]: *** [Makefile:411: all-recursive] Error 1
make[1]: Leaving directory &#39;/home/wangy/fastx_toolkit-0.0.14&#39;
make: *** [Makefile:342: all] Error 2
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;这个报错甚至可以在github中的一个&lt;a class=&#34;link&#34; href=&#34;https://github.com/agordon/fastx_toolkit/issues/21&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;issue&lt;/a&gt;中看到。解决方法也很简单：&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;cd /fastx_toolkit-0.0.14/src/fasta_formatter
vi fasta_formatter.cpp

switch(opt) {
                case &#39;h&#39;:
                        usage();
                        exit(0);//添加一行

&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;看起来这个步骤是提供命令行中&lt;code&gt;-h&lt;/code&gt;的帮助提示，不过需要添加&lt;code&gt;exit(0)&lt;/code&gt;返回，可能是bug又或是就版本的C支持这种语句？不懂。&lt;/p&gt;
&lt;h3 id=&#34;path&#34;&gt;PATH&lt;/h3&gt;
&lt;p&gt;最后，为了使用方便，最好还是把安装目录下的bin文件夹添加到$PATH环境变量&lt;/p&gt;
&lt;pre&gt;&lt;code&gt;export PATH=/PATH/TO/INSTALL/fastx_toolkit-0.0.14/bin
&lt;/code&gt;&lt;/pre&gt;&lt;p&gt;可以愉快的使用啦！&lt;/p&gt;
</description>
        </item>
        <item>
        <title>Methods for Checking Source Code of R Functions</title>
        <link>https://www.gagua.xyz/p/methods-for-checking-source-code-of-r-functions/</link>
        <pubDate>Mon, 01 Mar 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/methods-for-checking-source-code-of-r-functions/</guid>
        <description>


&lt;div id=&#34;r-functions-source-code&#34; class=&#34;section level1&#34;&gt;
&lt;h1&gt;R function’s source code&lt;/h1&gt;
&lt;p&gt;Recently, I found some problems programming with R, and I habitually pressed &lt;kbd&gt;F1&lt;/kbd&gt; for document. However, this document can’t figure out these problems. So I finally decided to check the source code of these functions. To be honest, it’s a little bit struggle for me to find source code since some R functions were written by C. Besides, the object oriented programming such as S3 generics make things weird.&lt;/p&gt;
&lt;p&gt;Thanks for some answers on &lt;a href=&#34;https://www.zhihu.com/question/24586822&#34;&gt;Zhihu platform&lt;/a&gt;, these problems have been solved already.&lt;/p&gt;
&lt;div id=&#34;print-funtions-name-immediately&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;print funtion’s name immediately&lt;/h2&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;rank&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;## function (x, na.last = TRUE, ties.method = c(&amp;quot;average&amp;quot;, &amp;quot;first&amp;quot;, 
##     &amp;quot;last&amp;quot;, &amp;quot;random&amp;quot;, &amp;quot;max&amp;quot;, &amp;quot;min&amp;quot;)) 
## {
##     nas &amp;lt;- is.na(x)
##     nm &amp;lt;- names(x)
##     ties.method &amp;lt;- match.arg(ties.method)
##     if (is.factor(x)) 
##         x &amp;lt;- as.integer(x)
##     x &amp;lt;- x[!nas]
##     y &amp;lt;- switch(ties.method, average = , min = , max = .Internal(rank(x, 
##         length(x), ties.method)), first = sort.list(sort.list(x)), 
##         last = sort.list(rev.default(sort.list(x, decreasing = TRUE))), 
##         random = sort.list(order(x, stats::runif(sum(!nas)))))
##     if (!is.na(na.last) &amp;amp;&amp;amp; any(nas)) {
##         yy &amp;lt;- NA
##         NAkeep &amp;lt;- (na.last == &amp;quot;keep&amp;quot;)
##         if (NAkeep || na.last) {
##             yy[!nas] &amp;lt;- y
##             if (!NAkeep) 
##                 yy[nas] &amp;lt;- (length(y) + 1L):length(yy)
##         }
##         else {
##             len &amp;lt;- sum(nas)
##             yy[!nas] &amp;lt;- y + len
##             yy[nas] &amp;lt;- seq_len(len)
##         }
##         y &amp;lt;- yy
##         names(y) &amp;lt;- nm
##     }
##     else names(y) &amp;lt;- nm[!nas]
##     y
## }
## &amp;lt;bytecode: 0x00000000138d6818&amp;gt;
## &amp;lt;environment: namespace:base&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;div id=&#34;call-edit&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;call edit()&lt;/h2&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;edit(rank)&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;## function (x, na.last = TRUE, ties.method = c(&amp;quot;average&amp;quot;, &amp;quot;first&amp;quot;, 
##     &amp;quot;last&amp;quot;, &amp;quot;random&amp;quot;, &amp;quot;max&amp;quot;, &amp;quot;min&amp;quot;)) 
## {
##     nas &amp;lt;- is.na(x)
##     nm &amp;lt;- names(x)
##     ties.method &amp;lt;- match.arg(ties.method)
##     if (is.factor(x)) 
##         x &amp;lt;- as.integer(x)
##     x &amp;lt;- x[!nas]
##     y &amp;lt;- switch(ties.method, average = , min = , max = .Internal(rank(x, 
##         length(x), ties.method)), first = sort.list(sort.list(x)), 
##         last = sort.list(rev.default(sort.list(x, decreasing = TRUE))), 
##         random = sort.list(order(x, stats::runif(sum(!nas)))))
##     if (!is.na(na.last) &amp;amp;&amp;amp; any(nas)) {
##         yy &amp;lt;- NA
##         NAkeep &amp;lt;- (na.last == &amp;quot;keep&amp;quot;)
##         if (NAkeep || na.last) {
##             yy[!nas] &amp;lt;- y
##             if (!NAkeep) 
##                 yy[nas] &amp;lt;- (length(y) + 1L):length(yy)
##         }
##         else {
##             len &amp;lt;- sum(nas)
##             yy[!nas] &amp;lt;- y + len
##             yy[nas] &amp;lt;- seq_len(len)
##         }
##         y &amp;lt;- yy
##         names(y) &amp;lt;- nm
##     }
##     else names(y) &amp;lt;- nm[!nas]
##     y
## }
## &amp;lt;environment: namespace:base&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;div id=&#34;call-page&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;call page()&lt;/h2&gt;
&lt;p&gt;It’s similar to ‘edit()’ but open on a new page&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;page(rank)&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;div id=&#34;methods&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;Methods()&lt;/h2&gt;
&lt;p&gt;For some functions, approaches above will not work.&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;mean&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;## function (x, ...) 
## UseMethod(&amp;quot;mean&amp;quot;)
## &amp;lt;bytecode: 0x0000000015b73ce8&amp;gt;
## &amp;lt;environment: namespace:base&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;Obviously, &lt;code&gt;mean&lt;/code&gt; function behave as a &lt;strong&gt;class&lt;/strong&gt; like other programming languages. It will call different methods depend on the type of it’s parameters. So that we need call &lt;code&gt;methods()&lt;/code&gt; for specific object.&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;methods(mean)&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;## [1] mean.Date     mean.default  mean.difftime mean.POSIXct  mean.POSIXlt 
## [6] mean.quosure*
## see &amp;#39;?methods&amp;#39; for accessing help and source code&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;mean.default&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;## function (x, trim = 0, na.rm = FALSE, ...) 
## {
##     if (!is.numeric(x) &amp;amp;&amp;amp; !is.complex(x) &amp;amp;&amp;amp; !is.logical(x)) {
##         warning(&amp;quot;argument is not numeric or logical: returning NA&amp;quot;)
##         return(NA_real_)
##     }
##     if (na.rm) 
##         x &amp;lt;- x[!is.na(x)]
##     if (!is.numeric(trim) || length(trim) != 1L) 
##         stop(&amp;quot;&amp;#39;trim&amp;#39; must be numeric of length one&amp;quot;)
##     n &amp;lt;- length(x)
##     if (trim &amp;gt; 0 &amp;amp;&amp;amp; n) {
##         if (is.complex(x)) 
##             stop(&amp;quot;trimmed means are not defined for complex data&amp;quot;)
##         if (anyNA(x)) 
##             return(NA_real_)
##         if (trim &amp;gt;= 0.5) 
##             return(stats::median(x, na.rm = FALSE))
##         lo &amp;lt;- floor(n * trim) + 1
##         hi &amp;lt;- n + 1 - lo
##         x &amp;lt;- sort.int(x, partial = unique(c(lo, hi)))[lo:hi]
##     }
##     .Internal(mean(x))
## }
## &amp;lt;bytecode: 0x0000000015304888&amp;gt;
## &amp;lt;environment: namespace:base&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;div id=&#34;getanywhere&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;getAnywhere&lt;/h2&gt;
&lt;p&gt;Sometimes there is function with asterisk, which can’t be looking for with &lt;code&gt;methods()&lt;/code&gt; because it’s written by C lang.&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;methods(mean)&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;## [1] mean.Date     mean.default  mean.difftime mean.POSIXct  mean.POSIXlt 
## [6] mean.quosure*
## see &amp;#39;?methods&amp;#39; for accessing help and source code&lt;/code&gt;&lt;/pre&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;try(methods(mean.quosure))&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;## Error in methods(mean.quosure) : object &amp;#39;mean.quosure&amp;#39; not found&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;&lt;code&gt;getAnywhere&lt;/code&gt; is needed.&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;getAnywhere(mean.quosure)&lt;/code&gt;&lt;/pre&gt;
&lt;pre&gt;&lt;code&gt;## A single object matching &amp;#39;mean.quosure&amp;#39; was found
## It was found in the following places
##   registered S3 method for mean from namespace rlang
##   namespace:rlang
## with value
## 
## function (x, na.rm = TRUE, ...) 
## {
##     abort_quosure_op(&amp;quot;Summary&amp;quot;, &amp;quot;mean&amp;quot;)
## }
## &amp;lt;bytecode: 0x0000000013251bc0&amp;gt;
## &amp;lt;environment: namespace:rlang&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;div id=&#34;cran&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;CRAN&lt;/h2&gt;
&lt;p&gt;comprehensive R archive network: &lt;a href=&#34;https://cran.r-project.org/&#34;&gt;CRAN&lt;/a&gt;&lt;/p&gt;
&lt;p&gt;choose &lt;em&gt;packages&lt;/em&gt; on the left side and download packages including such function, and source code is available.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</description>
        </item>
        <item>
        <title>Google Analytics And SEO</title>
        <link>https://www.gagua.xyz/p/google-analytics-and-seo/</link>
        <pubDate>Fri, 05 Feb 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/google-analytics-and-seo/</guid>
        <description>&lt;h1 id=&#34;google-analytics&#34;&gt;Google Analytics&lt;/h1&gt;
&lt;p&gt;Followed &lt;a class=&#34;link&#34; href=&#34;https://gohugo.io/templates/internal#google-analytics&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Hugo documents&lt;/a&gt;, I&amp;rsquo;d like to implement some extra features on my blog site such as &lt;abbr title=&#34;google analytics&#34;&gt;GA&lt;/abbr&gt;. Here are description about GA:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Google Analytics lets you measure your advertising ROI as well as track your Flash, video, and social networking sites and applications.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&#34;registration&#34;&gt;Registration&lt;/h2&gt;
&lt;p&gt;Google for Google Analytics，&lt;a class=&#34;link&#34; href=&#34;https://analytics.google.com/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;login in&lt;/a&gt; using personal google account&lt;sup id=&#34;fnref:1&#34;&gt;&lt;a href=&#34;#fn:1&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;1&lt;/a&gt;&lt;/sup&gt;. Add an user then create an application of website, it would generate a tracking id after choose &lt;strong&gt;data stream&lt;/strong&gt;. GA also provide some javascript code adding below the &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt; tag of website exactly to achieve analytics. It sounds terrible to add js code on each page of a website, fortunately, Hugo provide an internal template for GA. What I need to do is only to add a &lt;code&gt;{{ template &amp;quot;_internal/google_analytics_async.html&amp;quot; . }}&lt;/code&gt; shortcode at custom head file and provide tracking id in configuration file. Remarkably, I choose a asynchronous version, which might have a better performance, at least I hope so.&lt;/p&gt;
&lt;h2 id=&#34;analytics&#34;&gt;Analytics&lt;/h2&gt;
&lt;p&gt;It looks like GA has been an integrated marketing platform, however, I gravitate toward feature of visitor statistics such as visitors&#39; numbers&lt;sup id=&#34;fnref:2&#34;&gt;&lt;a href=&#34;#fn:2&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;2&lt;/a&gt;&lt;/sup&gt; and locations.&lt;/p&gt;
&lt;p&gt;example: &lt;figure style=&#34;flex-grow: 215; flex-basis: 516px&#34;&gt;
		&lt;a href=&#34;https://www.gagua.xyz/p/google-analytics-and-seo/images/google_analytic.png&#34; data-size=&#34;1901x884&#34;&gt;&lt;img src=&#34;https://www.gagua.xyz/p/google-analytics-and-seo/images/google_analytic.png&#34;
				srcset=&#34;https://www.gagua.xyz/p/google-analytics-and-seo/images/google_analytic_hue8f6761bdddb8db483171fc90720aa7c_526020_480x0_resize_box_2.png 480w, https://www.gagua.xyz/p/google-analytics-and-seo/images/google_analytic_hue8f6761bdddb8db483171fc90720aa7c_526020_1024x0_resize_box_2.png 1024w&#34;
				width=&#34;1901&#34;
				height=&#34;884&#34;
				loading=&#34;lazy&#34;
				alt=&#34;google analytic map&#34;&gt;
		&lt;/a&gt;
		
		&lt;figcaption&gt;google analytic map&lt;/figcaption&gt;
		
	&lt;/figure&gt;&lt;/p&gt;
&lt;h1 id=&#34;seo&#34;&gt;SEO&lt;/h1&gt;
&lt;p&gt;During learning website technology, I gradually recognized the importance of &lt;abbr title=&#34;search engine optimalization&#34;&gt;SEO&lt;/abbr&gt;. Hugo or theme provides a default &lt;code&gt;sitemap.xml&lt;/code&gt; file. In principle, search engines like &lt;em&gt;Google&lt;/em&gt; behave like a spider but it won&amp;rsquo;t go inside a deep hierarchy. Sitemap create a more flatten structure of the whole website consequently a better SEO performance.&lt;/p&gt;
&lt;h2 id=&#34;google-search-console&#34;&gt;Google Search Console&lt;/h2&gt;
&lt;p&gt;&lt;a class=&#34;link&#34; href=&#34;https://developers.google.com/search&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Google Search Console&lt;/a&gt;:&lt;/p&gt;
&lt;blockquote&gt;
&lt;p&gt;Google Search Central, formerly Google Webmasters, is here to help the right people view your content with resources to make your website discoverable to Google Search.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;It&amp;rsquo;s easy to verify website ownership using method &lt;strong&gt;Google Analytics&lt;/strong&gt; on that page. Next, log in &lt;strong&gt;Google Search Console&lt;/strong&gt;, after validate web information it will generate a txt token. Switching to DNS provider, add a &lt;strong&gt;txt&lt;/strong&gt; type DNS record whose value must be the token above. Besides, server name can be &lt;code&gt;@&lt;/code&gt;, might other names are also valid?&lt;/p&gt;
&lt;p&gt;In site map index, sitemap can be provided by an URL, of course the sitemap.xml path for my site.&lt;/p&gt;
&lt;h1 id=&#34;words-in-the-end&#34;&gt;Words in the End&lt;/h1&gt;
&lt;p&gt;In fact, as a personal tech blog, SEO seems not indispensable, maybe I&amp;rsquo;m so idle at home?&lt;/p&gt;
&lt;p&gt;next plan:&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input disabled=&#34;&#34; type=&#34;checkbox&#34;&gt; baidu SEO&lt;/li&gt;
&lt;li&gt;&lt;input disabled=&#34;&#34; type=&#34;checkbox&#34;&gt; indexes catalog&lt;/li&gt;
&lt;li&gt;&lt;input disabled=&#34;&#34; type=&#34;checkbox&#34;&gt; words statistic&lt;/li&gt;
&lt;/ul&gt;
&lt;section class=&#34;footnotes&#34; role=&#34;doc-endnotes&#34;&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id=&#34;fn:1&#34; role=&#34;doc-endnote&#34;&gt;
&lt;p&gt;thats what called &lt;em&gt;ecology&lt;/em&gt;? &lt;a href=&#34;#fnref:1&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&#34;fn:2&#34; role=&#34;doc-endnote&#34;&gt;
&lt;p&gt;a sadly news, it seems no one browse this website except myself. &lt;a href=&#34;#fnref:2&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</description>
        </item>
        <item>
        <title>甘雨：梦里韶光</title>
        <link>https://www.gagua.xyz/p/index.zh-cn/</link>
        <pubDate>Fri, 22 Jan 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/index.zh-cn/</guid>
        <description>





    


&lt;div style=&#34;position: relative; width: 100%; height: 0; padding-bottom: 56.25%;&#34;&gt;
    &lt;iframe src=&#34;//player.bilibili.com/player.html?as_wide=1&amp;amp;high_quality=1&amp;amp;page=1&amp;bvid=BV1xT4y1N7Wn&#34;
            scrolling=&#34;no&#34;
            frameborder=&#34;no&#34;
            framespacing=&#34;0&#34;
            allowfullscreen=&#34;true&#34;
            style=&#34;position: absolute; width: 100%; height: 100%; left: 0; top: 0;&#34;
    &gt;
    &lt;/iframe&gt;
&lt;/div&gt;

&lt;h2 id=&#34;可圈可点&#34;&gt;可圈可点&lt;/h2&gt;
&lt;p&gt;&lt;a class=&#34;link&#34; href=&#34;https://ys.mihoyo.com/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;原神&lt;/a&gt;，本来以为开放世界探索和氪金抽卡内核的冲突会导致游戏体验撕裂，结果成绩居然意料之外的不错。不过也没办法，毕竟原神作为一款手游可以说对其他游戏是降维打击。因为时间的缘故没法继续玩原神，不过消息还是一直在关注。新角色甘雨的PV实在是太完美了，&lt;a class=&#34;link&#34; href=&#34;https://www.mihayo.com/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;miHoYo&lt;/a&gt;不只是美工，连音乐也是神啊！BGM是璃月战斗曲的变奏，与PV画面可以说相当的契合，急促轻缓的节奏变化非常吸引人，不懂如何用专业术语评价，总之就是好听就完事了！&lt;del&gt;甘雨老婆！&lt;/del&gt;&lt;/p&gt;
</description>
        </item>
        <item>
        <title>Integrated R Workflow</title>
        <link>https://www.gagua.xyz/p/integrated-r-workflow/</link>
        <pubDate>Tue, 19 Jan 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/integrated-r-workflow/</guid>
        <description>&lt;h2 id=&#34;shiny&#34;&gt;Shiny&lt;/h2&gt;
&lt;p&gt;最近导师觉得找我要图太麻烦了，就让我弄一个网页版的工具来进行可视化。虽然这事之前确实没做过，不过对Shiny还算有所耳闻，初步想了一下，感觉不算什么太难的事情，就答应了&lt;sup id=&#34;fnref:1&#34;&gt;&lt;a href=&#34;#fn:1&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;1&lt;/a&gt;&lt;/sup&gt;。&lt;/p&gt;
&lt;p&gt;&lt;a class=&#34;link&#34; href=&#34;https://shiny.rstudio.com/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Shiny&lt;/a&gt;也算是Rstudio强推的一个通过R构建交互式网页的工具，不得不感慨一下Rstudio为R的社区生态做出的卓越贡献。Shiny教学看起来还挺完善的，视频版的教学据说内容更丰富，不过说实话这连个自动字幕都没有，就纯练英语听力，实在是太为难我了，果断选择&lt;em&gt;Written&lt;/em&gt;版。初学者的教学就7章，花了大概两个小时看完了，顺便跟着做了点练习，教学只提炼出了最基础的部分，不过也覆盖了生成一个完整的网页APP需要的部分，循序渐进好上手，有R的基础整这个还是挺方便的。&lt;/p&gt;
&lt;h3 id=&#34;deploy&#34;&gt;Deploy&lt;/h3&gt;
&lt;p&gt;本来想放在自己的服务器的，不过想到我服务器可怜的体量，还是别再开一个web server了。而且，&lt;a class=&#34;link&#34; href=&#34;https://www.shinyapps.io/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;shinyapps&lt;/a&gt;可以再Rstudio IDE中自动推送啥的，还不用再去github上整个仓库，感觉自家的工具链是真的爽，难怪有这么多人喜欢用苹果，用的不是手机，而是生态啊。&lt;/p&gt;
&lt;p&gt;&lt;a class=&#34;link&#34; href=&#34;https://gagua.shinyapps.io/circadian/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;my Shiny app&lt;/a&gt;不过感觉在用户体验方面还是有点点小问题，初次打开太慢了，这个也确实没办法，毕竟shiny启动需要加载一堆R包，还得加载数据，而且感觉这种网页不方便进行&lt;abbr title=&#34;content distribution network&#34;&gt;CDN&lt;/abbr&gt;。麻烦的在于，免费版的shinyapp服务每个月只有25小时的活跃(active)时间，也就是，当一段时间无人访问时，服务器会自动进入休眠状态，那再打开网页，就又相当于一次服务重启，相当耗时。如果有思路却要等网页加载，总感觉有点耽误科研效率，嘛，反正我也有本地数据，如果实在觉得性能不行，那就去申请经费整个会员吧。&lt;/p&gt;
&lt;h2 id=&#34;r-workflow&#34;&gt;R workflow&lt;/h2&gt;
&lt;p&gt;想想最近的分析工作，大概就是：&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;数据挖掘&lt;sup id=&#34;fnref:2&#34;&gt;&lt;a href=&#34;#fn:2&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;2&lt;/a&gt;&lt;/sup&gt;
在linux服务器上完成对性能需求较大的mapping, counting等步骤。这步通过基于python编写的&lt;a class=&#34;link&#34; href=&#34;https://snakemake.readthedocs.io/en/stable/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;snakemake&lt;/a&gt;完成了流程大体上的自动化。以后最好加个multiqc完成质量控制的可视化。&lt;/li&gt;
&lt;li&gt;可视化。在本地服务器上利用R完成数据挖掘和可视化，Rstudio是真的好用，就是字体有点难受，不好区分大小写，视觉上感觉还是更喜欢vscode。之前一直是用Rscript完成分析，这次换成是Rmarkdown。其实本质上没有区别，不过Rmarkdown可以自动生成pptx等展示文档，避免了汇报工作时还得手动插图片的尴尬&lt;sup id=&#34;fnref:3&#34;&gt;&lt;a href=&#34;#fn:3&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;3&lt;/a&gt;&lt;/sup&gt;。&lt;/li&gt;
&lt;li&gt;分享交互。用网页应用进行分享交互可能是最流行的方式了。这里采用Shiny，毕竟基于R，减少了学习成本，部署构建都挺快的，现在也还能满足需求。&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;通过这样一个R-&amp;gt;Rmarkdown-&amp;gt;Shiny的工作流，大体上实现了数据分析工作的自动化，最后的结果看起来也挺美观的。在这里再次感谢R的开源社区提供的强大工具，使得我甚至还有时间在这写blog。然而，还是存在平台的割裂，没有完全实现自动化。如果能把2、3步也放在远程服务器上解决就好了。这里存在的问题就是没钱&lt;sup id=&#34;fnref:4&#34;&gt;&lt;a href=&#34;#fn:4&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;4&lt;/a&gt;&lt;/sup&gt;，好吧，如果能购买Rstudio的社区版就好了。这样就可以通过snakemake继续调用R脚本，打包成一个完整的流程，不过以后这流程也不一定能再走一遍了。还好，snakemake似乎支持模块化，下次把流程优化重构成一个个单独的模组吧。如果能实现，就可以避免下载文件等一堆繁琐的事情了，也不用非得待在实验室，真好啊真好啊😉。&lt;/p&gt;
&lt;section class=&#34;footnotes&#34; role=&#34;doc-endnotes&#34;&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id=&#34;fn:1&#34; role=&#34;doc-endnote&#34;&gt;
&lt;p&gt;&lt;strong&gt;朕意已决&lt;/strong&gt;？ &lt;a href=&#34;#fnref:1&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&#34;fn:2&#34; role=&#34;doc-endnote&#34;&gt;
&lt;p&gt;markdown怎么实现&lt;strong&gt;description list&lt;/strong&gt;呀？ &lt;a href=&#34;#fnref:2&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&#34;fn:3&#34; role=&#34;doc-endnote&#34;&gt;
&lt;p&gt;就是感觉对ppt的支持还不够完整，当然很大可能是我太菜了。 &lt;a href=&#34;#fnref:3&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;li id=&#34;fn:4&#34; role=&#34;doc-endnote&#34;&gt;
&lt;p&gt;人唯一的病就是穷病？ &lt;a href=&#34;#fnref:4&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;
</description>
        </item>
        <item>
        <title>Auto Pull Using Webhook And Nodejs</title>
        <link>https://www.gagua.xyz/p/auto-pull-using-webhook-and-nodejs/</link>
        <pubDate>Fri, 08 Jan 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/auto-pull-using-webhook-and-nodejs/</guid>
        <description>&lt;h1 id=&#34;purpose&#34;&gt;Purpose&lt;/h1&gt;
&lt;p&gt;I need to build a webserver using nodejs which listens to a certain port. Besides, writing a simple shell script to implement auto pull is necessary. It&amp;rsquo;s vital to find a approach which is able to parse a json content and  execute shell scripts. Considering latent security problem, enable SSL verification and setting secret token is recommended.&lt;/p&gt;
&lt;h2 id=&#34;install-nodejs&#34;&gt;install nodejs&lt;/h2&gt;
&lt;p&gt;I first tried &lt;code&gt;conda search node&lt;/code&gt; then find the version of nodejs in conda repository is not the latest version.
However, &lt;a class=&#34;link&#34; href=&#34;https://nodejs.org/en/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;nodejs&lt;/a&gt; is similar to python that has a active community, and the version iteration of nodejs is frequent. So  &lt;strong&gt;using a Node version manager like &lt;a class=&#34;link&#34; href=&#34;https://github.com/nvm-sh/nvm&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;nvm&lt;/a&gt; to install Node.js and &lt;a class=&#34;link&#34; href=&#34;https://docs.npmjs.com/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;npm&lt;/a&gt; is strongly recommend.&lt;/strong&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh &lt;span class=&#34;p&#34;&gt;|&lt;/span&gt; bash
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;To verify that nvm has been installed, do:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt; &lt;span class=&#34;nb&#34;&gt;command&lt;/span&gt; -v nvm
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;To download, compile, and install the latest release of node, do this:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;nvm install node &lt;span class=&#34;c1&#34;&gt;# &amp;#34;node&amp;#34; is an alias for the latest version&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;To install a specific version of node:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;nvm install 6.14.4 &lt;span class=&#34;c1&#34;&gt;# or 10.10.0, 8.9.1, etc&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;then check out version of node and &lt;abbr title=&#34;nodejs package manager&#34;&gt;npm&lt;/abbr&gt;:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;npm -v
node -v
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h2 id=&#34;github-webhook-handler&#34;&gt;github-webhook-handler&lt;/h2&gt;
&lt;p&gt;All fundamental preparation is finished, install a small handle &lt;a class=&#34;link&#34; href=&#34;https://github.com/rvagg/github-webhook-handler&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;github-webhook-handler&lt;/a&gt; that help with listening for a POST request at certain port.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;npm i github-webhook-handler
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;following the example on that document, I set a &lt;code&gt;.js&lt;/code&gt; script which create a server listening for event and execute &lt;strong&gt;shell&lt;/strong&gt; script setted previously.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-javascript&#34; data-lang=&#34;javascript&#34;&gt;&lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;http&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;require&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;http&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;exec&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;require&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;child_process&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;exec&lt;/span&gt;
&lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;createHandler&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;require&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;github-webhook-handler&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
&lt;span class=&#34;kd&#34;&gt;var&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;handler&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;createHandler&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;({&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;path&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;s1&#34;&gt;&amp;#39;$payload/url&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;secret&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;:&lt;/span&gt; &lt;span class=&#34;s1&#34;&gt;&amp;#39;myxxxxx&amp;#39;&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;})&lt;/span&gt;&lt;span class=&#34;c1&#34;&gt;// confirm your path and secret are consistent with those setting on github webserver page. 
&lt;/span&gt;&lt;span class=&#34;c1&#34;&gt;&lt;/span&gt;
&lt;span class=&#34;nx&#34;&gt;http&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;createServer&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;req&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;res&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
&lt;span class=&#34;nx&#34;&gt;handler&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;req&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;res&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;err&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
    &lt;span class=&#34;nx&#34;&gt;res&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;statusCode&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;mi&#34;&gt;404&lt;/span&gt;
    &lt;span class=&#34;nx&#34;&gt;res&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;end&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;no such location&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;
  &lt;span class=&#34;p&#34;&gt;})&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;}).&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;listen&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;$port&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt;

&lt;span class=&#34;nx&#34;&gt;handler&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;on&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;push&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;event&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
    &lt;span class=&#34;kd&#34;&gt;let&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;currentTime&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;=&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;new&lt;/span&gt; &lt;span class=&#34;nb&#34;&gt;Date&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;();&lt;/span&gt;
    &lt;span class=&#34;nx&#34;&gt;console&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;log&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;\n--&amp;gt; &amp;#39;&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;+&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;currentTime&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;toLocaleString&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;());&lt;/span&gt;
    &lt;span class=&#34;nx&#34;&gt;console&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;log&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;Received a push event for %s to %s&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;event&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;payload&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;repository&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;name&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;event&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;payload&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;ref&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
    &lt;span class=&#34;nx&#34;&gt;exec&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;sh $path/to/sh&amp;#39;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;kd&#34;&gt;function&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;error&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;stdout&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;,&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;stderr&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;&lt;span class=&#34;c1&#34;&gt;//execute shell script
&lt;/span&gt;&lt;span class=&#34;c1&#34;&gt;&lt;/span&gt;        &lt;span class=&#34;k&#34;&gt;if&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;error&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;)&lt;/span&gt; &lt;span class=&#34;p&#34;&gt;{&lt;/span&gt;
            &lt;span class=&#34;nx&#34;&gt;console&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;error&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;error:\n&amp;#39;&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;+&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;error&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
            &lt;span class=&#34;k&#34;&gt;return&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
        &lt;span class=&#34;p&#34;&gt;}&lt;/span&gt;
        &lt;span class=&#34;nx&#34;&gt;console&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;log&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;stdout:\n&amp;#39;&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;+&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;stdout&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
        &lt;span class=&#34;nx&#34;&gt;console&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;.&lt;/span&gt;&lt;span class=&#34;nx&#34;&gt;log&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;(&lt;/span&gt;&lt;span class=&#34;s1&#34;&gt;&amp;#39;stderr:\n&amp;#39;&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;+&lt;/span&gt; &lt;span class=&#34;nx&#34;&gt;stderr&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;);&lt;/span&gt;
    &lt;span class=&#34;p&#34;&gt;});&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;})&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;using npm install &lt;a class=&#34;link&#34; href=&#34;https://pm2.keymetrics.io/docs/usage/quick-start/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;pm2&lt;/a&gt; then call &lt;code&gt;pm2 start .js&lt;/code&gt; and &lt;code&gt;pm2 startup&lt;/code&gt; directives to keep script lauched.&lt;/p&gt;
&lt;h2 id=&#34;nginx-reverse-proxy&#34;&gt;nginx reverse proxy&lt;/h2&gt;
&lt;p&gt;Nodejs lauched sebserver at certain port but reversed proxy to 80 port is convenient for using webhook. rewrite nginx configuration file as followed&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;location /&lt;span class=&#34;nv&#34;&gt;$payload&lt;/span&gt; &lt;span class=&#34;o&#34;&gt;{&lt;/span&gt; 
      &lt;span class=&#34;nb&#34;&gt;alias&lt;/span&gt; &lt;span class=&#34;nv&#34;&gt;$path&lt;/span&gt;/to/js&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;
      proxy_pass https://&lt;span class=&#34;nv&#34;&gt;$ip&lt;/span&gt;:&lt;span class=&#34;nv&#34;&gt;$port&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;;&lt;/span&gt;  
    &lt;span class=&#34;o&#34;&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;open github webhook page and click redeliver, but the same error status code 502 popped up again, it&amp;rsquo;s a little frustrating. Then I scaned  the latest nginx error code, finding something different:&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-shell&#34; data-lang=&#34;shell&#34;&gt;SSL_do_handshake&lt;span class=&#34;o&#34;&gt;()&lt;/span&gt; failed &lt;span class=&#34;o&#34;&gt;(&lt;/span&gt;SSL: error:1408F10B:SSL routines:ssl3_get_record:wrong version number&lt;span class=&#34;o&#34;&gt;)&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;I&amp;rsquo;m definitely a google oriented programmer. By google I find some possible solutions, one is that reversed proxy don&amp;rsquo;t need HTTPS, so just fix &lt;code&gt;proxy_pass https://$ip:$port;&lt;/code&gt; as &lt;code&gt;proxy_pass http://$ip:$port;&lt;/code&gt; then webhook  would work well &lt;code&gt;{&amp;quot;ok&amp;quot;:true}&lt;/code&gt;. However, I didn&amp;rsquo;t figure out the reason absolutely, maybe there is no SSL requirement for reversed proxy inside the same host, or nodejs script lauched a server using http protocol.&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;&lt;input disabled=&#34;&#34; type=&#34;checkbox&#34;&gt; waitting for complete solution&lt;/li&gt;
&lt;/ul&gt;
</description>
        </item>
        <item>
        <title>Deploy A Static Blog Site</title>
        <link>https://www.gagua.xyz/p/deploy-a-static-blog-site/</link>
        <pubDate>Thu, 07 Jan 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/deploy-a-static-blog-site/</guid>
        <description>
&lt;script src=&#34;https://www.gagua.xyz/p/deploy-a-static-blog-site/index.en_files/header-attrs/header-attrs.js&#34;&gt;&lt;/script&gt;

&lt;div id=&#34;TOC&#34;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;#deployment&#34;&gt;Deployment&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;#此时需要&#34;&gt;此时需要:&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;#webserver&#34;&gt;WebServer&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;#install-nginx&#34;&gt;install nginx&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;#domain-name-and-https&#34;&gt;domain name and https&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;#https&#34;&gt;https&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;#webhook&#34;&gt;webhook&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;#githook&#34;&gt;githook&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;#github-webhook&#34;&gt;github webhook&lt;/a&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;#section&#34;&gt;405&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;div id=&#34;deployment&#34; class=&#34;section level1&#34;&gt;
&lt;h1&gt;Deployment&lt;/h1&gt;
&lt;p&gt;网站如果只运行在local host那还叫啥网站啊，如果部署在一个具有公网ip的服务器，这样就能实现让几乎所有人都能通过浏览器访问自己的网站。&lt;a href=&#34;https://bookdown.org/yihui/blogdown/deployment.html&#34;&gt;blogdown&lt;/a&gt;文档中提供了多种部署方案，但在这里选择部署至一台自己的vps上。&lt;/p&gt;
&lt;div id=&#34;此时需要&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;此时需要:&lt;/h2&gt;
&lt;ul&gt;
&lt;li&gt;能通过互联网访问的主机（host）一台&lt;/li&gt;
&lt;li&gt;网站（博客）的文件&lt;/li&gt;
&lt;li&gt;client——浏览器&lt;/li&gt;
&lt;li&gt;server——webServer&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;云计算，大数据如此火热的现在，主机现在显然不是问题。博客文件已经通过blogdown生成，浏览器也成为了大部分人的应用，接下来就只剩下webServer的问题了。&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&#34;webserver&#34; class=&#34;section level1&#34;&gt;
&lt;h1&gt;WebServer&lt;/h1&gt;
&lt;p&gt;WebServer可以解析&lt;abbr title=&#34;hyper text transfer protocol&#34;&gt;HTTP&lt;/abbr&gt;，响应(response)一个请求(request)，通常都是返回一个html文件来让浏览器进行浏览。在这里我选用的是&lt;a href=&#34;http://nginx.org/en/&#34;&gt;nginx&lt;/a&gt;，一款主要由Igor Sysoev在&lt;em&gt;业余时间&lt;/em&gt;开发的HTTP和反向代理的服务器。当然还有其他功能，不过我暂时用上的就只有这两个。webserver当然由很多，如Apache等，甚至可以用python等自己实现一个，但是为什么我会选择nginx？主要是因为nginx内存占用小，并发高（这一点对于我暂时没有什么用处），有着优秀的静态处理性能（关键）。这对于私人博客这样一个静态网站来说，是完美的选择。&lt;/p&gt;
&lt;div id=&#34;install-nginx&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;install nginx&lt;/h2&gt;
&lt;p&gt;&lt;a href=&#34;http://nginx.org/en/&#34;&gt;nginx&lt;/a&gt;可以通过源码安装，但是在linux上想到的，果然还是yum优先。抱歉，由权限是真的可以为所欲为。&lt;/p&gt;
&lt;pre class=&#34;shell&#34;&gt;&lt;code&gt;yum install nginx
......
no package nginx available&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;？居然显示仓库中没有nginx，怎么可能？很好，我选择万能的conda。
安装好miniconda之后，&lt;code&gt;conda search nginx&lt;/code&gt;，果然有，完成下载。在浏览器访问主机的ip地址，出现以下的界面：&lt;/p&gt;
&lt;div class=&#34;figure&#34;&gt;
&lt;img src=&#34;https://www.gagua.xyz/post/2021-01-07-deploy-a-static-blog-site/index.en_files/b92e58d99fd61d99cac151a5a241feb1.jpg&#34; style=&#34;width:80.0%&#34; alt=&#34;&#34; /&gt;
&lt;p class=&#34;caption&#34;&gt;nginx 安装成功&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;注意，conda 安装的nginx将根目录设置的是conda所在目录。&lt;/p&gt;
&lt;pre class=&#34;shell&#34;&gt;&lt;code&gt;git clone xxx.git&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;从远程仓库git clone得到静态网页项目文件，之后的就是设置nginx的配置文件了。
&lt;code&gt;nginx -t&lt;/code&gt;直接找到配置文件位置&lt;/p&gt;
&lt;pre class=&#34;shell&#34;&gt;&lt;code&gt;# nginx -t
nginx: the configuration file $path/to/conf/file syntax is ok
nginx: configuration file $path/to/conf/file test is successful
vi $path/to/conf/file
.
.
.
include sites.d/*.conf;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;nginx将&lt;code&gt;sites.d/*.conf&lt;/code&gt;中的所有文件包含在了配置文件中。在&lt;code&gt;sites.d/&lt;/code&gt;下新建一个&lt;code&gt;.conf&lt;/code&gt;文件，&lt;/p&gt;
&lt;pre class=&#34;shell&#34;&gt;&lt;code&gt;server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;假设网页文件夹的绝对路径为$abl，主机ip为$ip修改&lt;/p&gt;
&lt;pre class=&#34;shell&#34;&gt;&lt;code&gt;server {
        listen       80;
        server_name  $ip;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   $abl;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;尝试浏览器访问ip，结果发现403 Forbidden，这个是跟权限有关的状态码。啊这不对劲，难道是conda安装的nginx有问题吗？就想尝试以下系统安装的方法。&lt;/p&gt;
&lt;p&gt;之后google一下发现yum无法安装的原因是nginx位于第三方的yum源里面，而不在centos官方yum源里。
那就安装&lt;abbr title=&#34;Extra Packages for Enterprise Linux&#34;&gt;EPEL&lt;/abbr&gt;源好了。&lt;/p&gt;
&lt;pre class=&#34;shell&#34;&gt;&lt;code&gt;yum install epel-release
yum update
yum install -y nginx&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;应该就可以完成nginx安装了。不过这样会导致，存在两个nginx进程，后面导致监控work process端口出现了一点点麻烦，干脆把yum安装的nginx删除（conda永远滴神！）。&lt;/p&gt;
&lt;p&gt;继续访问ip，居然还是403。喵喵喵？百度一下，发现是由于nginx用户和登录用户不一致导致的问题。&lt;/p&gt;
&lt;pre class=&#34;shell&#34;&gt;&lt;code&gt;vi $path/to/conf/file
...
# Run as a unique, less privileged user for security.
 user nobody www-data;  ## Default: nobody&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;修改用户(user)和用户组(user group)后，重启nginx&lt;code&gt;nginx -s reload&lt;/code&gt;就能通过ip访问。看到网站成功打开还蛮开心的，就像成功把积木玩具拼装好一样。&lt;/p&gt;
&lt;/div&gt;
&lt;div id=&#34;domain-name-and-https&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;domain name and https&lt;/h2&gt;
&lt;p&gt;ip难以记忆，也不够cooooool，那必须得采用域名来进行访问。域名很便宜，很多地方都可以购买，烂大街的玩意，不过好的域名还真难找，gagua.com——市场营销精品店公司,gagua.cn(这个貌似有，不过还是想要个.com域名啊啊啊)。这还是，第一次发现&lt;em&gt;gagua&lt;/em&gt;这名字，都会有人取呢。最后，还是选了个.xyz域名，虽然可能存在SEO之类的问题，不过对于我这样一个个人博客来说，应该无所谓了。&lt;/p&gt;
&lt;ul class=&#34;task-list&#34;&gt;
&lt;li&gt;&lt;input type=&#34;checkbox&#34; disabled=&#34;&#34; /&gt;
其实我还不懂为什么域名还能收费，等以后的答案吧&lt;/li&gt;
&lt;li&gt;&lt;input type=&#34;checkbox&#34; disabled=&#34;&#34; /&gt;
不知道能不能自己实现DNS解析服务&lt;/li&gt;
&lt;li&gt;&lt;input type=&#34;checkbox&#34; disabled=&#34;&#34; /&gt;
www和@，CNAME&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;在域名解析服务商解决DNS解析问题，相当于做一个域名到ip的映射，之后就是添加A记录不过这个也不是很懂，以后再看看吧。
这一步需要等待一些时间。&lt;/p&gt;
&lt;p&gt;DNS解析成功后，修改&lt;em&gt;server_name&lt;/em&gt;为域名&lt;/p&gt;
&lt;pre class=&#34;shell&#34;&gt;&lt;code&gt;server {
        listen       80;
        server_name  domain_name;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;然后就可以尝试通过域名访问啦。可惜在浏览器无论是输入&lt;em&gt;domain_name&lt;/em&gt; &lt;em&gt;&lt;a href=&#34;http://domain_name&#34; class=&#34;uri&#34;&gt;http://domain_name&lt;/a&gt;&lt;/em&gt; 还是 &lt;em&gt;&lt;a href=&#34;http://domain_name:80&#34; class=&#34;uri&#34;&gt;http://domain_name:80&lt;/a&gt;&lt;/em&gt; 都无法成功，无法找到服务器。而后，我突然意识到，pc端的谷歌浏览器默认使用&lt;abbr title=&#34;hyper text transfer protocol over secure socket layer&#34;&gt;https&lt;/abbr&gt;，而nginx只监听了80端口。于是乎又将配置文件修改为443，即https的默认端口。
&lt;strong&gt;此时需要确保端口打开&lt;/strong&gt;&lt;code&gt;firewall-cmd --zone=public --add-port=443/tcp --permanent&lt;/code&gt;&lt;/p&gt;
&lt;p&gt;满怀希望。&lt;/p&gt;
&lt;p&gt;结果却是：&lt;code&gt;ERR_SSL_PROTOCOL_ERROR&lt;/code&gt;。搜索了一下错误码，发现是因为没有配置ssl协议。&lt;/p&gt;
&lt;div id=&#34;https&#34; class=&#34;section level3&#34;&gt;
&lt;h3&gt;https&lt;/h3&gt;
&lt;p&gt;https通过加入&lt;abbr title=&#34;transfer layer security&#34;&gt;TLS&lt;/abbr&gt;/&lt;abbr title=&#34;secure socket layer&#34;&gt;SSL&lt;/abbr&gt;协议在HTTP的基础上通过传输加密和身份认证保证了传输过程的安全性。&lt;/p&gt;
&lt;div id=&#34;ssl证书申请&#34; class=&#34;section level4&#34;&gt;
&lt;h4&gt;SSL证书申请&lt;/h4&gt;
&lt;p&gt;DNSPod可以直接申请CA证书。不得不说，腾讯还是会做点好事的，免费证书真香，还能自动添加解析记录。一键生成，下载证书后会得到一个与webserver相关的.crt证书文件和.key私钥文件。貌似好像可以自动生成证书，以后研究一下原理。&lt;/p&gt;
&lt;/div&gt;
&lt;div id=&#34;ssl证书部署&#34; class=&#34;section level4&#34;&gt;
&lt;h4&gt;SSL证书部署&lt;/h4&gt;
&lt;p&gt;感谢腾讯云的&lt;a href=&#34;https://cloud.tencent.com/document/product/400/4143&#34;&gt;悉心指导&lt;/a&gt;&lt;/p&gt;
&lt;pre class=&#34;shell&#34;&gt;&lt;code&gt;server {
    #SSL 访问端口号为 443
    listen 443 ssl; 
 #填写绑定证书的域名
    server_name cloud.tencent.com; 
 #证书文件名称
    ssl_certificate 1_cloud.tencent.com_bundle.crt; 
 #私钥文件名称
    ssl_certificate_key 2_cloud.tencent.com.key; 
    ssl_session_timeout 5m;
 #请按照以下协议配置
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2; 
 #请按照以下套件配置，配置加密套件，写法遵循 openssl 标准。
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE; 
    ssl_prefer_server_ciphers on;
    location / {
    #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。
        root html; 
        index  index.html index.htm;
    }
}&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;而后还可以将HTTP 请求自动重定向到 HTTPS&lt;/p&gt;
&lt;pre class=&#34;shell&#34;&gt;&lt;code&gt;server {
listen 443 ssl;
#填写绑定证书的域名
server_name cloud.tencent.com; 
#证书文件名称
ssl_certificate  1_cloud.tencent.com_bundle.crt; 
#私钥文件名称
ssl_certificate_key 2_cloud.tencent.com.key; 
ssl_session_timeout 5m;
ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
ssl_prefer_server_ciphers on;
location / {
   #网站主页路径。此路径仅供参考，具体请您按照实际目录操作。  
   root html;
  index index.html index.htm;
}
}
server {
listen 80;
#填写绑定证书的域名
server_name cloud.tencent.com; 
#把http的域名请求转成https
return 301 https://$host$request_uri; 
}&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;此后就可通过https://domain_name访问。完美！&lt;/p&gt;
&lt;p&gt;就此，网站部署工作已经大体上完成。在&lt;code&gt;git pull&lt;/code&gt;时，我突然又懒癌发作。一定有，自动pull的方法吧？虽然ssh登录顺便输个命令并不算多大的工作量，不过这理应是计算机该做的事情吧？！&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div id=&#34;webhook&#34; class=&#34;section level1&#34;&gt;
&lt;h1&gt;webhook&lt;/h1&gt;
&lt;div id=&#34;githook&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;githook&lt;/h2&gt;
&lt;p&gt;首先看到的是&lt;a href=&#34;https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks&#34;&gt;githook&lt;/a&gt;，提供自定义的脚本，在特定的动作发生后就会执行脚本。提供了client-side和server-side脚本，不过这个好像和我想要的server-web_server有点不同，代表的可能是远程仓库的server。&lt;/p&gt;
&lt;p&gt;其实也可以通过在client-side的脚本中设置commit触发ssh链接加git pull，不过总感觉这样的实现不够优雅，而且越过了远程仓库，总感觉会导致一些意料之外的问题。&lt;/p&gt;
&lt;/div&gt;
&lt;div id=&#34;github-webhook&#34; class=&#34;section level2&#34;&gt;
&lt;h2&gt;github webhook&lt;/h2&gt;
&lt;p&gt;github为每个仓库提供了&lt;a href=&#34;https://docs.github.com/en/free-pro-team@latest/developers/webhooks-and-events&#34;&gt;webhook&lt;/a&gt;，github webhook与githook类似，都是响应动作(response action)。在仓库的setting中可以找到webhook设定，其中必须要添加的是&lt;strong&gt;Payload URL&lt;/strong&gt;，webhook会在动作触发后向URL发送一个称为Payload的POST请求(request)，请求体(request body)为json，触发动作和发送的文件内容当然也能选择，详情见&lt;a href=&#34;https://docs.github.com/en/free-pro-team@latest/developers/webhooks-and-events&#34;&gt;文档&lt;/a&gt;。&lt;/p&gt;
&lt;p&gt;当然，这只是发送了一个POST request，当时的我天真的以为在URL的文件夹下添加&lt;code&gt;git pull&lt;/code&gt;的.sh文件就可以实现自动化。
结果当然是，翻车了。&lt;/p&gt;
&lt;pre class=&#34;html&#34;&gt;&lt;code&gt;&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;&amp;lt;title&amp;gt;405 Not Allowed&amp;lt;/title&amp;gt;&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;center&amp;gt;&amp;lt;h1&amp;gt;405 Not Allowed&amp;lt;/h1&amp;gt;&amp;lt;/center&amp;gt;
&amp;lt;hr&amp;gt;&amp;lt;center&amp;gt;nginx&amp;lt;/center&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;div id=&#34;section&#34; class=&#34;section level3&#34;&gt;
&lt;h3&gt;405&lt;/h3&gt;
&lt;blockquote&gt;
&lt;p&gt;请求行中指定的请求方法不能被用于请求相应的资源。该响应必须返回一个Allow 头信息用以表示出当前资源能够接受的请求方法的列表。鉴于 PUT，DELETE 方法会对服务器上的资源进行写操作，因而绝大部分的网页服务器都不支持或者在默认配置下不允许上述请求方法，对于此类请求均会返回405错误。&lt;/p&gt;
&lt;/blockquote&gt;
&lt;p&gt;nginx作为webserver，不允许静态文件响应POST请求，因此会返回405错误。&lt;/p&gt;
&lt;p&gt;在网上找了nginx不响应POST请求的解决方法，不过按结果来看：&lt;/p&gt;
&lt;pre class=&#34;html&#34;&gt;&lt;code&gt;&amp;lt;html&amp;gt;
&amp;lt;head&amp;gt;&amp;lt;title&amp;gt;502 Bad Gateway&amp;lt;/title&amp;gt;&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
&amp;lt;center&amp;gt;&amp;lt;h1&amp;gt;502 Bad Gateway&amp;lt;/h1&amp;gt;&amp;lt;/center&amp;gt;
&amp;lt;hr&amp;gt;&amp;lt;center&amp;gt;nginx&amp;lt;/center&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;&lt;/code&gt;&lt;/pre&gt;
&lt;p&gt;查看错误记录发现&lt;code&gt;connect() failed (111: Connection refused) while connecting to upstream&lt;/code&gt;，上游是一个.sh文件，怎么可能进行连接。
能response to POST request的，只能是(可以是)&lt;strong&gt;webserver&lt;/strong&gt;， 既然现在所用的nginx不允许静态文件响应请求，那就只能再建立一个服务器监听特定端口，大多数现有的方案都是通过PHP来解决，不过我对这门语言实在是不太熟悉，最后还是选择了，&lt;strong&gt;Nodejs&lt;/strong&gt;&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
</description>
        </item>
        <item>
        <title>Establish A Website With R Blogdown</title>
        <link>https://www.gagua.xyz/p/establish-a-website-by-r-blogdown/</link>
        <pubDate>Wed, 06 Jan 2021 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/establish-a-website-by-r-blogdown/</guid>
        <description>
&lt;script src=&#34;https://www.gagua.xyz/p/establish-a-website-by-r-blogdown/index.en_files/header-attrs/header-attrs.js&#34;&gt;&lt;/script&gt;

&lt;div id=&#34;TOC&#34;&gt;
&lt;ul&gt;
&lt;li&gt;&lt;a href=&#34;#缘起&#34;&gt;缘起&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;#选型&#34;&gt;选型&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#34;#blogdown&#34;&gt;blogdown&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;/div&gt;

&lt;div id=&#34;缘起&#34; class=&#34;section level1&#34;&gt;
&lt;h1&gt;缘起&lt;/h1&gt;
&lt;p&gt;&lt;a href=&#34;https://bookdown.org/yihui/blogdown&#34;&gt;Blogdown&lt;/a&gt;是由&lt;a href=&#34;https://yihui.org&#34;&gt;Yihui Xie&lt;/a&gt;基于&lt;a href=&#34;https://gohugo.io/&#34;&gt;Hugo&lt;/a&gt;编写的一个R包，用于便捷地进行静态网站的构建。由于Yihui大神和RStudio团队的不懈努力，一个充满活力的R语言社区得以构建。加上之前偶然尝试了Yihui的另一个R包Rmarkdown，不由惊为天人。恰巧最近也学了点web相关的知识，html,css,native js等等，于是就产生了构建一个博客的想法，顺便也能记录一些在探索中遇到的技术问题，分享数据可视化的一些美图，实践《计算机网络，自顶而下方法》，《深入理解计算机系统》。&lt;/p&gt;
&lt;/div&gt;
&lt;div id=&#34;选型&#34; class=&#34;section level1&#34;&gt;
&lt;h1&gt;选型&lt;/h1&gt;
&lt;p&gt;Blogdown下载直接&lt;code&gt;install.packages()&lt;/code&gt;，在比较新版本的RStudio IDE中，New Project中可以直接选择website using blogdown，RStudio会自动下载新版本的Hugo，在此也能选择主题(theme github)。在Hugo官网中纠结了很久，最后还是选了&lt;a href=&#34;https://themes.gohugo.io/hugo-theme-stack&#34;&gt;Stack&lt;/a&gt;作为我博客的主题，说实话第一眼还是配图吸引了我，果然人就是肤浅的视觉动物。分类、搜索、评论、无框架，在满足了我基本的需求之后，还能提供相对充裕的自定制空间。毕竟框架虽然强大，但却封装了技术细节，想弄懂又需要花费不少学习成本，好吧，懒癌晚期，if it works, don’t fix it?&lt;/p&gt;
&lt;/div&gt;
&lt;div id=&#34;blogdown&#34; class=&#34;section level1&#34;&gt;
&lt;h1&gt;blogdown&lt;/h1&gt;
&lt;p&gt;在这想稍微详细说一下blogdown。众所周知，hugo是一款以Go开发的强大的静态网站生成器，那为什么还要开发blogdown呢？很简单，因为hugo暂时还没有完成对.Rmd的支持，但rmarkdown直接在网页中同时包含代码和生成的结果实在是太香了（其实还有更多的功能，但我就是个视觉动物）。Yihui因此开发了blogdown（有技术真的可以为所欲为吗），实现了对.Rmd的解析渲染，并且能实现bookdown、rmarkdown的绝大部分特性（yihui怎么又是你，难道这就是推荐式算法吗，信息茧房恐怖如斯），加上&lt;a href=&#34;https://shiny.rstudio.com/&#34;&gt;Shiny&lt;/a&gt;应该可以实现交互式的页面应用，很可惜我暂时还不懂shiny咋用。这里又要吹一波RSstudio了，Addins提供了包括新增post和插入image等操作的快捷方式。&lt;/p&gt;
&lt;div class=&#34;figure&#34;&gt;
&lt;img src=&#34;https://www.gagua.xyz/post/2021-01-06-establish-a-website-by-r-blogdown/index.en_files/addins.png&#34; style=&#34;width:50.0%&#34; alt=&#34;&#34; /&gt;
&lt;p class=&#34;caption&#34;&gt;blogdown addins&lt;/p&gt;
&lt;/div&gt;
&lt;p&gt;（啊，为什么本地加载图片会失败啊，哦，原来是生成路径的问题，rmd要加入/post/）&lt;/p&gt;
&lt;p&gt;总之，&lt;code&gt;blogdown:::serve_site()&lt;/code&gt;建立本地服务器用于预览，&lt;code&gt;blogdown::build_site()&lt;/code&gt;后能得到一个默认为&lt;strong&gt;public&lt;/strong&gt;的文件夹，里面就包含了博客所需要的所有文件。接下来就是github新建仓库, git commit, push remote一气呵成，很快啊。注意要在public文件夹建立仓库，因为建站所需的文件只有这些。&lt;/p&gt;
&lt;/div&gt;
</description>
        </item>
        <item>
        <title>Chinese Test</title>
        <link>https://www.gagua.xyz/p/test-chinese/</link>
        <pubDate>Wed, 09 Sep 2020 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/test-chinese/</guid>
        <description>&lt;img src="https://www.gagua.xyz/p/test-chinese/helena-hertz-wWZzXlDpMog-unsplash.jpg" alt="Featured image of post Chinese Test" /&gt;&lt;h2 id=&#34;正文测试&#34;&gt;正文测试&lt;/h2&gt;
&lt;p&gt;而这些并不是完全重要，更加重要的问题是， 带着这些问题，我们来审视一下学生会退会。 既然如何， 对我个人而言，学生会退会不仅仅是一个重大的事件，还可能会改变我的人生。 我们不得不面对一个非常尴尬的事实，那就是， 可是，即使是这样，学生会退会的出现仍然代表了一定的意义。 学生会退会，发生了会如何，不发生又会如何。 经过上述讨论， 生活中，若学生会退会出现了，我们就不得不考虑它出现了的事实。 学生会退会，到底应该如何实现。 这样看来， 在这种困难的抉择下，本人思来想去，寝食难安。 对我个人而言，学生会退会不仅仅是一个重大的事件，还可能会改变我的人生。 就我个人来说，学生会退会对我的意义，不能不说非常重大。 莎士比亚曾经提到过，人的一生是短的，但如果卑劣地过这一生，就太长了。这似乎解答了我的疑惑。 莫扎特说过一句富有哲理的话，谁和我一样用功，谁就会和我一样成功。这启发了我， 对我个人而言，学生会退会不仅仅是一个重大的事件，还可能会改变我的人生。 学生会退会，到底应该如何实现。 一般来说， 从这个角度来看， 这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。 在这种困难的抉择下，本人思来想去，寝食难安。 了解清楚学生会退会到底是一种怎么样的存在，是解决一切问题的关键。 一般来说， 生活中，若学生会退会出现了，我们就不得不考虑它出现了的事实。 问题的关键究竟为何？ 而这些并不是完全重要，更加重要的问题是。&lt;/p&gt;
&lt;p&gt;奥斯特洛夫斯基曾经说过，共同的事业，共同的斗争，可以使人们产生忍受一切的力量。　带着这句话，我们还要更加慎重的审视这个问题： 一般来讲，我们都必须务必慎重的考虑考虑。 既然如此， 这种事实对本人来说意义重大，相信对这个世界也是有一定意义的。 带着这些问题，我们来审视一下学生会退会。 我认为， 我认为， 在这种困难的抉择下，本人思来想去，寝食难安。 问题的关键究竟为何？ 每个人都不得不面对这些问题。 在面对这种问题时， 要想清楚，学生会退会，到底是一种怎么样的存在。 我认为， 既然如此， 每个人都不得不面对这些问题。 在面对这种问题时， 那么， 我认为， 学生会退会因何而发生。&lt;/p&gt;
&lt;h2 id=&#34;引用&#34;&gt;引用&lt;/h2&gt;
&lt;blockquote&gt;
&lt;p&gt;思念是最暖的忧伤像一双翅膀&lt;br&gt;
让我停不了飞不远在过往游荡&lt;br&gt;
不告而别的你 就算为了我着想&lt;br&gt;
这么沉痛的呵护 我怎么能翱翔&lt;/p&gt;
&lt;p&gt;&lt;em&gt;&lt;a class=&#34;link&#34; href=&#34;https://www.youtube.com/watch?v=3aypp_YlBzI&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;最暖的憂傷 - 田馥甄&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&#34;图片&#34;&gt;图片&lt;/h2&gt;
&lt;p&gt;&lt;figure style=&#34;flex-grow: 66; flex-basis: 160px&#34;&gt;
		&lt;a href=&#34;https://www.gagua.xyz/p/test-chinese/florian-klauer-nptLmg6jqDo-unsplash.jpg&#34; data-size=&#34;667x1000&#34;&gt;&lt;img src=&#34;https://www.gagua.xyz/p/test-chinese/florian-klauer-nptLmg6jqDo-unsplash.jpg&#34;
				srcset=&#34;https://www.gagua.xyz/p/test-chinese/florian-klauer-nptLmg6jqDo-unsplash_hu595aaf3b3dbbb41af5aed8d3958cc9f9_13854_480x0_resize_q75_box.jpg 480w, https://www.gagua.xyz/p/test-chinese/florian-klauer-nptLmg6jqDo-unsplash_hu595aaf3b3dbbb41af5aed8d3958cc9f9_13854_1024x0_resize_q75_box.jpg 1024w&#34;
				width=&#34;667&#34;
				height=&#34;1000&#34;
				loading=&#34;lazy&#34;
				alt=&#34;Photo by Florian Klauer on Unsplash&#34;&gt;
		&lt;/a&gt;
		
		&lt;figcaption&gt;Photo by Florian Klauer on Unsplash&lt;/figcaption&gt;
		
	&lt;/figure&gt;  &lt;figure style=&#34;flex-grow: 149; flex-basis: 359px&#34;&gt;
		&lt;a href=&#34;https://www.gagua.xyz/p/test-chinese/luca-bravo-alS7ewQ41M8-unsplash.jpg&#34; data-size=&#34;1000x667&#34;&gt;&lt;img src=&#34;https://www.gagua.xyz/p/test-chinese/luca-bravo-alS7ewQ41M8-unsplash.jpg&#34;
				srcset=&#34;https://www.gagua.xyz/p/test-chinese/luca-bravo-alS7ewQ41M8-unsplash_hu0a3f1163de68d0b9471979ebf0ecf11e_32400_480x0_resize_q75_box.jpg 480w, https://www.gagua.xyz/p/test-chinese/luca-bravo-alS7ewQ41M8-unsplash_hu0a3f1163de68d0b9471979ebf0ecf11e_32400_1024x0_resize_q75_box.jpg 1024w&#34;
				width=&#34;1000&#34;
				height=&#34;667&#34;
				loading=&#34;lazy&#34;
				alt=&#34;Photo by Luca Bravo on Unsplash&#34;&gt;
		&lt;/a&gt;
		
		&lt;figcaption&gt;Photo by Luca Bravo on Unsplash&lt;/figcaption&gt;
		
	&lt;/figure&gt;&lt;/p&gt;
&lt;p&gt;&lt;figure style=&#34;flex-grow: 133; flex-basis: 320px&#34;&gt;
		&lt;a href=&#34;https://www.gagua.xyz/p/test-chinese/helena-hertz-wWZzXlDpMog-unsplash.jpg&#34; data-size=&#34;1000x750&#34;&gt;&lt;img src=&#34;https://www.gagua.xyz/p/test-chinese/helena-hertz-wWZzXlDpMog-unsplash.jpg&#34;
				srcset=&#34;https://www.gagua.xyz/p/test-chinese/helena-hertz-wWZzXlDpMog-unsplash_hu45a5e3ad5e058da6a00650ed8fd40bea_15530_480x0_resize_q75_box.jpg 480w, https://www.gagua.xyz/p/test-chinese/helena-hertz-wWZzXlDpMog-unsplash_hu45a5e3ad5e058da6a00650ed8fd40bea_15530_1024x0_resize_q75_box.jpg 1024w&#34;
				width=&#34;1000&#34;
				height=&#34;750&#34;
				loading=&#34;lazy&#34;
				alt=&#34;Photo by Helena Hertz on Unsplash&#34;&gt;
		&lt;/a&gt;
		
		&lt;figcaption&gt;Photo by Helena Hertz on Unsplash&lt;/figcaption&gt;
		
	&lt;/figure&gt;  &lt;figure style=&#34;flex-grow: 66; flex-basis: 160px&#34;&gt;
		&lt;a href=&#34;https://www.gagua.xyz/p/test-chinese/hudai-gayiran-3Od_VKcDEAA-unsplash.jpg&#34; data-size=&#34;667x1000&#34;&gt;&lt;img src=&#34;https://www.gagua.xyz/p/test-chinese/hudai-gayiran-3Od_VKcDEAA-unsplash.jpg&#34;
				srcset=&#34;https://www.gagua.xyz/p/test-chinese/hudai-gayiran-3Od_VKcDEAA-unsplash_hub241c2a9c7a2caf7e16a2a5bbc7141ff_18711_480x0_resize_q75_box.jpg 480w, https://www.gagua.xyz/p/test-chinese/hudai-gayiran-3Od_VKcDEAA-unsplash_hub241c2a9c7a2caf7e16a2a5bbc7141ff_18711_1024x0_resize_q75_box.jpg 1024w&#34;
				width=&#34;667&#34;
				height=&#34;1000&#34;
				loading=&#34;lazy&#34;
				alt=&#34;Photo by Hudai Gayiran on Unsplash&#34;&gt;
		&lt;/a&gt;
		
		&lt;figcaption&gt;Photo by Hudai Gayiran on Unsplash&lt;/figcaption&gt;
		
	&lt;/figure&gt;&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-markdown&#34; data-lang=&#34;markdown&#34;&gt;![&lt;span class=&#34;nt&#34;&gt;Photo by Florian Klauer on Unsplash&lt;/span&gt;](&lt;span class=&#34;na&#34;&gt;florian-klauer-nptLmg6jqDo-unsplash.jpg&lt;/span&gt;)  ![&lt;span class=&#34;nt&#34;&gt;Photo by Luca Bravo on Unsplash&lt;/span&gt;](&lt;span class=&#34;na&#34;&gt;luca-bravo-alS7ewQ41M8-unsplash.jpg&lt;/span&gt;) 

![&lt;span class=&#34;nt&#34;&gt;Photo by Helena Hertz on Unsplash&lt;/span&gt;](&lt;span class=&#34;na&#34;&gt;helena-hertz-wWZzXlDpMog-unsplash.jpg&lt;/span&gt;)  ![&lt;span class=&#34;nt&#34;&gt;Photo by Hudai Gayiran on Unsplash&lt;/span&gt;](&lt;span class=&#34;na&#34;&gt;hudai-gayiran-3Od_VKcDEAA-unsplash.jpg&lt;/span&gt;)
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;p&gt;相册语法来自 &lt;a class=&#34;link&#34; href=&#34;https://typlog.com/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Typlog&lt;/a&gt;&lt;/p&gt;
</description>
        </item>
        <item>
        <title>Markdown Syntax Guide</title>
        <link>https://www.gagua.xyz/p/markdown-syntax-guide/</link>
        <pubDate>Mon, 11 Mar 2019 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/markdown-syntax-guide/</guid>
        <description>&lt;img src="https://www.gagua.xyz/p/markdown-syntax-guide/pawel-czerwinski-8uZPynIu-rQ-unsplash.jpg" alt="Featured image of post Markdown Syntax Guide" /&gt;&lt;p&gt;This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.&lt;/p&gt;
&lt;h2 id=&#34;headings&#34;&gt;Headings&lt;/h2&gt;
&lt;p&gt;The following HTML &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt;—&lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt; elements represent six levels of section headings. &lt;code&gt;&amp;lt;h1&amp;gt;&lt;/code&gt; is the highest section level while &lt;code&gt;&amp;lt;h6&amp;gt;&lt;/code&gt; is the lowest.&lt;/p&gt;
&lt;h1 id=&#34;h1&#34;&gt;H1&lt;/h1&gt;
&lt;h2 id=&#34;h2&#34;&gt;H2&lt;/h2&gt;
&lt;h3 id=&#34;h3&#34;&gt;H3&lt;/h3&gt;
&lt;h4 id=&#34;h4&#34;&gt;H4&lt;/h4&gt;
&lt;h5 id=&#34;h5&#34;&gt;H5&lt;/h5&gt;
&lt;h6 id=&#34;h6&#34;&gt;H6&lt;/h6&gt;
&lt;h2 id=&#34;paragraph&#34;&gt;Paragraph&lt;/h2&gt;
&lt;p&gt;Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.&lt;/p&gt;
&lt;p&gt;Itatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.&lt;/p&gt;
&lt;h2 id=&#34;blockquotes&#34;&gt;Blockquotes&lt;/h2&gt;
&lt;p&gt;The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a &lt;code&gt;footer&lt;/code&gt; or &lt;code&gt;cite&lt;/code&gt; element, and optionally with in-line changes such as annotations and abbreviations.&lt;/p&gt;
&lt;h4 id=&#34;blockquote-without-attribution&#34;&gt;Blockquote without attribution&lt;/h4&gt;
&lt;blockquote&gt;
&lt;p&gt;Tiam, ad mint andaepu dandae nostion secatur sequo quae.
&lt;strong&gt;Note&lt;/strong&gt; that you can use &lt;em&gt;Markdown syntax&lt;/em&gt; within a blockquote.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h4 id=&#34;blockquote-with-attribution&#34;&gt;Blockquote with attribution&lt;/h4&gt;
&lt;blockquote&gt;
&lt;p&gt;Don&amp;rsquo;t communicate by sharing memory, share memory by communicating.&lt;br&gt;
— &lt;cite&gt;Rob Pike&lt;sup id=&#34;fnref:1&#34;&gt;&lt;a href=&#34;#fn:1&#34; class=&#34;footnote-ref&#34; role=&#34;doc-noteref&#34;&gt;1&lt;/a&gt;&lt;/sup&gt;&lt;/cite&gt;&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h2 id=&#34;tables&#34;&gt;Tables&lt;/h2&gt;
&lt;p&gt;Tables aren&amp;rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.&lt;/p&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Name&lt;/th&gt;
&lt;th&gt;Age&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Bob&lt;/td&gt;
&lt;td&gt;27&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Alice&lt;/td&gt;
&lt;td&gt;23&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h4 id=&#34;inline-markdown-within-tables&#34;&gt;Inline Markdown within tables&lt;/h4&gt;
&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Italics&lt;/th&gt;
&lt;th&gt;Bold&lt;/th&gt;
&lt;th&gt;Code&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;em&gt;italics&lt;/em&gt;&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;bold&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;&lt;code&gt;code&lt;/code&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;
&lt;h2 id=&#34;code-blocks&#34;&gt;Code Blocks&lt;/h2&gt;
&lt;h4 id=&#34;code-block-with-backticks&#34;&gt;Code block with backticks&lt;/h4&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span class=&#34;cp&#34;&gt;&amp;lt;!doctype html&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;html&lt;/span&gt; &lt;span class=&#34;na&#34;&gt;lang&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;en&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;head&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;meta&lt;/span&gt; &lt;span class=&#34;na&#34;&gt;charset&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;utf-8&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;Example HTML5 Document&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;head&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;body&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;p&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;Test&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;p&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;body&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;html&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;h4 id=&#34;code-block-indented-with-four-spaces&#34;&gt;Code block indented with four spaces&lt;/h4&gt;
&lt;pre&gt;&lt;code&gt;&amp;lt;!doctype html&amp;gt;
&amp;lt;html lang=&amp;quot;en&amp;quot;&amp;gt;
&amp;lt;head&amp;gt;
  &amp;lt;meta charset=&amp;quot;utf-8&amp;quot;&amp;gt;
  &amp;lt;title&amp;gt;Example HTML5 Document&amp;lt;/title&amp;gt;
&amp;lt;/head&amp;gt;
&amp;lt;body&amp;gt;
  &amp;lt;p&amp;gt;Test&amp;lt;/p&amp;gt;
&amp;lt;/body&amp;gt;
&amp;lt;/html&amp;gt;
&lt;/code&gt;&lt;/pre&gt;
&lt;h4 id=&#34;code-block-with-hugos-internal-highlight-shortcode&#34;&gt;Code block with Hugo&amp;rsquo;s internal highlight shortcode&lt;/h4&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;&lt;span class=&#34;cp&#34;&gt;&amp;lt;!doctype html&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;html&lt;/span&gt; &lt;span class=&#34;na&#34;&gt;lang&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;en&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;head&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;meta&lt;/span&gt; &lt;span class=&#34;na&#34;&gt;charset&lt;/span&gt;&lt;span class=&#34;o&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;s&#34;&gt;&amp;#34;utf-8&amp;#34;&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;Example HTML5 Document&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;title&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;head&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;body&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
  &lt;span class=&#34;p&#34;&gt;&amp;lt;&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;p&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;Test&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;p&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;body&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;
&lt;span class=&#34;p&#34;&gt;&amp;lt;/&lt;/span&gt;&lt;span class=&#34;nt&#34;&gt;html&lt;/span&gt;&lt;span class=&#34;p&#34;&gt;&amp;gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;
&lt;h2 id=&#34;list-types&#34;&gt;List Types&lt;/h2&gt;
&lt;h4 id=&#34;ordered-list&#34;&gt;Ordered List&lt;/h4&gt;
&lt;ol&gt;
&lt;li&gt;First item&lt;/li&gt;
&lt;li&gt;Second item&lt;/li&gt;
&lt;li&gt;Third item&lt;/li&gt;
&lt;/ol&gt;
&lt;h4 id=&#34;unordered-list&#34;&gt;Unordered List&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;List item&lt;/li&gt;
&lt;li&gt;Another item&lt;/li&gt;
&lt;li&gt;And another item&lt;/li&gt;
&lt;/ul&gt;
&lt;h4 id=&#34;nested-list&#34;&gt;Nested list&lt;/h4&gt;
&lt;ul&gt;
&lt;li&gt;Fruit
&lt;ul&gt;
&lt;li&gt;Apple&lt;/li&gt;
&lt;li&gt;Orange&lt;/li&gt;
&lt;li&gt;Banana&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;li&gt;Dairy
&lt;ul&gt;
&lt;li&gt;Milk&lt;/li&gt;
&lt;li&gt;Cheese&lt;/li&gt;
&lt;/ul&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 id=&#34;other-elements--abbr-sub-sup-kbd-mark&#34;&gt;Other Elements — abbr, sub, sup, kbd, mark&lt;/h2&gt;
&lt;p&gt;&lt;abbr title=&#34;Graphics Interchange Format&#34;&gt;GIF&lt;/abbr&gt; is a bitmap image format.&lt;/p&gt;
&lt;p&gt;H&lt;sub&gt;2&lt;/sub&gt;O&lt;/p&gt;
&lt;p&gt;X&lt;sup&gt;n&lt;/sup&gt; + Y&lt;sup&gt;n&lt;/sup&gt; = Z&lt;sup&gt;n&lt;/sup&gt;&lt;/p&gt;
&lt;p&gt;Press &lt;kbd&gt;&lt;kbd&gt;CTRL&lt;/kbd&gt;+&lt;kbd&gt;ALT&lt;/kbd&gt;+&lt;kbd&gt;Delete&lt;/kbd&gt;&lt;/kbd&gt; to end the session.&lt;/p&gt;
&lt;p&gt;Most &lt;mark&gt;salamanders&lt;/mark&gt; are nocturnal, and hunt for insects, worms, and other small creatures.&lt;/p&gt;
&lt;section class=&#34;footnotes&#34; role=&#34;doc-endnotes&#34;&gt;
&lt;hr&gt;
&lt;ol&gt;
&lt;li id=&#34;fn:1&#34; role=&#34;doc-endnote&#34;&gt;
&lt;p&gt;The above quote is excerpted from Rob Pike&amp;rsquo;s &lt;a class=&#34;link&#34; href=&#34;https://www.youtube.com/watch?v=PAAkCSZUG1c&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;talk&lt;/a&gt; during Gopherfest, November 18, 2015. &lt;a href=&#34;#fnref:1&#34; class=&#34;footnote-backref&#34; role=&#34;doc-backlink&#34;&gt;&amp;#x21a9;&amp;#xfe0e;&lt;/a&gt;&lt;/p&gt;
&lt;/li&gt;
&lt;/ol&gt;
&lt;/section&gt;</description>
        </item>
        <item>
        <title>Placeholder Text</title>
        <link>https://www.gagua.xyz/p/placeholder-text/</link>
        <pubDate>Sat, 09 Mar 2019 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/placeholder-text/</guid>
        <description>&lt;img src="https://www.gagua.xyz/p/placeholder-text/matt-le-SJSpo9hQf7s-unsplash.jpg" alt="Featured image of post Placeholder Text" /&gt;&lt;p&gt;Lorem est tota propiore conpellat pectoribus de pectora summo.&lt;/p&gt;
&lt;p&gt;Redit teque digerit hominumque toris verebor lumina non cervice subde tollit usus habet Arctonque, furores quas nec ferunt. Quoque montibus nunc caluere tempus inhospita parcite confusaque translucet patri vestro qui optatis lumine cognoscere flos nubis! Fronde ipsamque patulos Dryopen deorum.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Exierant elisi ambit vivere dedere&lt;/li&gt;
&lt;li&gt;Duce pollice&lt;/li&gt;
&lt;li&gt;Eris modo&lt;/li&gt;
&lt;li&gt;Spargitque ferrea quos palude&lt;/li&gt;
&lt;/ol&gt;
&lt;p&gt;Rursus nulli murmur; hastile inridet ut ab gravi sententia! Nomine potitus silentia flumen, sustinet placuit petis in dilapsa erat sunt. Atria tractus malis.&lt;/p&gt;
&lt;ol&gt;
&lt;li&gt;Comas hunc haec pietate fetum procerum dixit&lt;/li&gt;
&lt;li&gt;Post torum vates letum Tiresia&lt;/li&gt;
&lt;li&gt;Flumen querellas&lt;/li&gt;
&lt;li&gt;Arcanaque montibus omnes&lt;/li&gt;
&lt;li&gt;Quidem et&lt;/li&gt;
&lt;/ol&gt;
&lt;h1 id=&#34;vagus-elidunt&#34;&gt;Vagus elidunt&lt;/h1&gt;
&lt;p&gt;&lt;svg class=&#34;canon&#34; xmlns=&#34;http://www.w3.org/2000/svg&#34; overflow=&#34;visible&#34; viewBox=&#34;0 0 496 373&#34; height=&#34;373&#34; width=&#34;496&#34;&gt;&lt;g fill=&#34;none&#34;&gt;&lt;path stroke=&#34;#000&#34; stroke-width=&#34;.75&#34; d=&#34;M.599 372.348L495.263 1.206M.312.633l494.95 370.853M.312 372.633L247.643.92M248.502.92l246.76 370.566M330.828 123.869V1.134M330.396 1.134L165.104 124.515&#34;&gt;&lt;/path&gt;&lt;path stroke=&#34;#ED1C24&#34; stroke-width=&#34;.75&#34; d=&#34;M275.73 41.616h166.224v249.05H275.73zM54.478 41.616h166.225v249.052H54.478z&#34;&gt;&lt;/path&gt;&lt;path stroke=&#34;#000&#34; stroke-width=&#34;.75&#34; d=&#34;M.479.375h495v372h-495zM247.979.875v372&#34;&gt;&lt;/path&gt;&lt;ellipse cx=&#34;498.729&#34; cy=&#34;177.625&#34; rx=&#34;.75&#34; ry=&#34;1.25&#34;&gt;&lt;/ellipse&gt;&lt;ellipse cx=&#34;247.229&#34; cy=&#34;377.375&#34; rx=&#34;.75&#34; ry=&#34;1.25&#34;&gt;&lt;/ellipse&gt;&lt;/g&gt;&lt;/svg&gt;&lt;/p&gt;
&lt;p&gt;&lt;a class=&#34;link&#34; href=&#34;https://en.wikipedia.org/wiki/Canons_of_page_construction#Van_de_Graaf_canon&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;The Van de Graaf Canon&lt;/a&gt;&lt;/p&gt;
&lt;h2 id=&#34;mane-refeci-capiebant-unda-mulcebat&#34;&gt;Mane refeci capiebant unda mulcebat&lt;/h2&gt;
&lt;p&gt;Victa caducifer, malo vulnere contra dicere aurato, ludit regale, voca! Retorsit colit est profanae esse virescere furit nec; iaculi matertera et visa est, viribus. Divesque creatis, tecta novat collumque vulnus est, parvas. &lt;strong&gt;Faces illo pepulere&lt;/strong&gt; tempus adest. Tendit flamma, ab opes virum sustinet, sidus sequendo urbis.&lt;/p&gt;
&lt;p&gt;Iubar proles corpore raptos vero auctor imperium; sed et huic: manus caeli Lelegas tu lux. Verbis obstitit intus oblectamina fixis linguisque ausus sperare Echionides cornuaque tenent clausit possit. Omnia putatur. Praeteritae refert ausus; ferebant e primus lora nutat, vici quae mea ipse. Et iter nil spectatae vulnus haerentia iuste et exercebat, sui et.&lt;/p&gt;
&lt;p&gt;Eurytus Hector, materna ipsumque ut Politen, nec, nate, ignari, vernum cohaesit sequitur. Vel &lt;strong&gt;mitis temploque&lt;/strong&gt; vocatus, inque alis, &lt;em&gt;oculos nomen&lt;/em&gt; non silvis corpore coniunx ne displicet illa. Crescunt non unus, vidit visa quantum inmiti flumina mortis facto sic: undique a alios vincula sunt iactata abdita! Suspenderat ego fuit tendit: luna, ante urbem Propoetides &lt;strong&gt;parte&lt;/strong&gt;.&lt;/p&gt;</description>
        </item>
        <item>
        <title>Math Typesetting</title>
        <link>https://www.gagua.xyz/p/math-typesetting/</link>
        <pubDate>Fri, 08 Mar 2019 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/math-typesetting/</guid>
        <description>&lt;p&gt;Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.&lt;/p&gt;
&lt;p&gt;In this example we will be using &lt;a class=&#34;link&#34; href=&#34;https://katex.org/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;KaTeX&lt;/a&gt;&lt;/p&gt;
&lt;ul&gt;
&lt;li&gt;Create a partial under &lt;code&gt;/layouts/partials/math.html&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;Within this partial reference the &lt;a class=&#34;link&#34; href=&#34;https://katex.org/docs/autorender.html&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Auto-render Extension&lt;/a&gt; or host these scripts locally.&lt;/li&gt;
&lt;li&gt;Include the partial in your templates like so:&lt;/li&gt;
&lt;/ul&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-bash&#34; data-lang=&#34;bash&#34;&gt;&lt;span class=&#34;o&#34;&gt;{{&lt;/span&gt; &lt;span class=&#34;k&#34;&gt;if&lt;/span&gt; or .Params.math .Site.Params.math &lt;span class=&#34;o&#34;&gt;}}&lt;/span&gt;
&lt;span class=&#34;o&#34;&gt;{{&lt;/span&gt; partial &lt;span class=&#34;s2&#34;&gt;&amp;#34;math.html&amp;#34;&lt;/span&gt; . &lt;span class=&#34;o&#34;&gt;}}&lt;/span&gt;
&lt;span class=&#34;o&#34;&gt;{{&lt;/span&gt; end &lt;span class=&#34;o&#34;&gt;}}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;&lt;ul&gt;
&lt;li&gt;To enable KaTex globally set the parameter &lt;code&gt;math&lt;/code&gt; to &lt;code&gt;true&lt;/code&gt; in a project&amp;rsquo;s configuration&lt;/li&gt;
&lt;li&gt;To enable KaTex on a per page basis include the parameter &lt;code&gt;math: true&lt;/code&gt; in content files&lt;/li&gt;
&lt;/ul&gt;
&lt;p&gt;&lt;strong&gt;Note:&lt;/strong&gt; Use the online reference of &lt;a class=&#34;link&#34; href=&#34;https://katex.org/docs/supported.html&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Supported TeX Functions&lt;/a&gt;&lt;/p&gt;

&lt;h3 id=&#34;examples&#34;&gt;Examples&lt;/h3&gt;

&lt;p&gt;Block math:
$$
\varphi = 1+\frac{1} {1+\frac{1} {1+\frac{1} {1+\cdots} } }
$$&lt;/p&gt;</description>
        </item>
        <item>
        <title>Emoji Support</title>
        <link>https://www.gagua.xyz/p/emoji-support/</link>
        <pubDate>Tue, 05 Mar 2019 00:00:00 +0000</pubDate>
        
        <guid>https://www.gagua.xyz/p/emoji-support/</guid>
        <description>&lt;img src="https://www.gagua.xyz/p/emoji-support/the-creative-exchange-d2zvqp3fpro-unsplash.jpg" alt="Featured image of post Emoji Support" /&gt;&lt;p&gt;Emoji can be enabled in a Hugo project in a number of ways.&lt;/p&gt;
&lt;p&gt;The &lt;a class=&#34;link&#34; href=&#34;https://gohugo.io/functions/emojify/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;&lt;code&gt;emojify&lt;/code&gt;&lt;/a&gt; function can be called directly in templates or &lt;a class=&#34;link&#34; href=&#34;https://gohugo.io/templates/shortcode-templates/#inline-shortcodes&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Inline Shortcodes&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;To enable emoji globally, set &lt;code&gt;enableEmoji&lt;/code&gt; to &lt;code&gt;true&lt;/code&gt; in your site&amp;rsquo;s &lt;a class=&#34;link&#34; href=&#34;https://gohugo.io/getting-started/configuration/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;configuration&lt;/a&gt; and then you can type emoji shorthand codes directly in content files; e.g.&lt;/p&gt;
&lt;p&gt;&lt;span class=&#34;nowrap&#34;&gt;&lt;span class=&#34;emojify&#34;&gt;🙈&lt;/span&gt; &lt;code&gt;🙈&lt;/code&gt;&lt;/span&gt;  &lt;span class=&#34;nowrap&#34;&gt;&lt;span class=&#34;emojify&#34;&gt;🙉&lt;/span&gt; &lt;code&gt;🙉&lt;/code&gt;&lt;/span&gt;  &lt;span class=&#34;nowrap&#34;&gt;&lt;span class=&#34;emojify&#34;&gt;🙊&lt;/span&gt; &lt;code&gt;🙊&lt;/code&gt;&lt;/span&gt;&lt;/p&gt;
&lt;br&gt;
&lt;p&gt;The &lt;a class=&#34;link&#34; href=&#34;http://www.emoji-cheat-sheet.com/&#34;  target=&#34;_blank&#34; rel=&#34;noopener&#34;
    &gt;Emoji cheat sheet&lt;/a&gt; is a useful reference for emoji shorthand codes.&lt;/p&gt;
&lt;hr&gt;
&lt;p&gt;&lt;strong&gt;N.B.&lt;/strong&gt; The above steps enable Unicode Standard emoji characters and sequences in Hugo, however the rendering of these glyphs depends on the browser and the platform. To style the emoji you can either use a third party emoji font or a font stack; e.g.&lt;/p&gt;
&lt;div class=&#34;highlight&#34;&gt;&lt;pre class=&#34;chroma&#34;&gt;&lt;code class=&#34;language-html&#34; data-lang=&#34;html&#34;&gt;.emoji {
  font-family: Apple Color Emoji, Segoe UI Emoji, NotoColorEmoji, Segoe UI Symbol, Android Emoji, EmojiSymbols;
}&lt;/code&gt;&lt;/pre&gt;&lt;/div&gt;</description>
        </item>
        <item>
        <title>Hello R Markdown</title>
        <link>https://www.gagua.xyz/p/hello-r-markdown/</link>
        <pubDate>Thu, 23 Jul 2015 21:13:14 -0500</pubDate>
        
        <guid>https://www.gagua.xyz/p/hello-r-markdown/</guid>
        <description>
&lt;script src=&#34;https://www.gagua.xyz/p/hello-r-markdown/index_files/header-attrs/header-attrs.js&#34;&gt;&lt;/script&gt;


&lt;div id=&#34;r-markdown&#34; class=&#34;section level1&#34;&gt;
&lt;h1&gt;R Markdown&lt;/h1&gt;
&lt;p&gt;This is an R Markdown document. Markdown is a simple formatting syntax for authoring HTML, PDF, and MS Word documents. For more details on using R Markdown see &lt;a href=&#34;http://rmarkdown.rstudio.com&#34; class=&#34;uri&#34;&gt;http://rmarkdown.rstudio.com&lt;/a&gt;.&lt;/p&gt;
&lt;p&gt;You can embed an R code chunk like this:&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;summary(cars)
##      speed           dist       
##  Min.   : 4.0   Min.   :  2.00  
##  1st Qu.:12.0   1st Qu.: 26.00  
##  Median :15.0   Median : 36.00  
##  Mean   :15.4   Mean   : 42.98  
##  3rd Qu.:19.0   3rd Qu.: 56.00  
##  Max.   :25.0   Max.   :120.00
fit &amp;lt;- lm(dist ~ speed, data = cars)
fit
## 
## Call:
## lm(formula = dist ~ speed, data = cars)
## 
## Coefficients:
## (Intercept)        speed  
##     -17.579        3.932&lt;/code&gt;&lt;/pre&gt;
&lt;/div&gt;
&lt;div id=&#34;including-plots&#34; class=&#34;section level1&#34;&gt;
&lt;h1&gt;Including Plots&lt;/h1&gt;
&lt;p&gt;You can also embed plots. See Figure &lt;a href=&#34;#fig:pie&#34;&gt;1&lt;/a&gt; for example:&lt;/p&gt;
&lt;pre class=&#34;r&#34;&gt;&lt;code&gt;par(mar = c(0, 1, 0, 1))
pie(
  c(280, 60, 20),
  c(&amp;#39;Sky&amp;#39;, &amp;#39;Sunny side of pyramid&amp;#39;, &amp;#39;Shady side of pyramid&amp;#39;),
  col = c(&amp;#39;#0292D8&amp;#39;, &amp;#39;#F7EA39&amp;#39;, &amp;#39;#C4B632&amp;#39;),
  init.angle = -50, border = NA
)&lt;/code&gt;&lt;/pre&gt;
&lt;div class=&#34;figure&#34;&gt;&lt;span id=&#34;fig:pie&#34;&gt;&lt;/span&gt;
&lt;img src=&#34;https://www.gagua.xyz/p/hello-r-markdown/index_files/figure-html/pie-1.png&#34; alt=&#34;A fancy pie chart.&#34; width=&#34;672&#34; /&gt;
&lt;p class=&#34;caption&#34;&gt;
Figure 1: A fancy pie chart.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</description>
        </item>
        
    </channel>
</rss>