diff --git a/.gitmodules b/.gitmodules index a29502f..eff918d 100644 --- a/.gitmodules +++ b/.gitmodules @@ -1,6 +1,3 @@ -[submodule "homebrew"] - path = _quickstart/homebrew - url = https://github.com/bamr87/homebrew -[submodule "winget"] - path = _quickstart/winget - url = https://github.com/bamr87/winget-packages.git +[submodule "pages/_docs/jekyll-docs"] + path = pages/_docs/jekyll-docs + url = https://github.com/jekyll/jekyll.git diff --git a/Gemfile b/Gemfile index 32c422f..c7c978d 100644 --- a/Gemfile +++ b/Gemfile @@ -24,6 +24,7 @@ group :jekyll_plugins do gem 'jekyll-algolia' gem 'jekyll-assets', "~> 1.0.0" gem 'jekyll-mermaid' + gem 'jekyll-admin' # gem 'jekyll-spaceship' # these are all part of the github-pages gem diff --git a/_config.yml b/_config.yml index d6a0161..eaa3ab6 100644 --- a/_config.yml +++ b/_config.yml @@ -66,6 +66,18 @@ maintainers: - name: "Vacant" profile: "/github.com" + +## Admin Information---------------------------------------------------------- + +jekyll_admin: + # hidden_links: + # - posts + # - pages + # - staticfiles + # - datafiles + # - configuration + homepage: "pages" + ## Personalization ---------------------------------------------------------------- locale : "en-US" diff --git a/_includes/docs_variables_table.html b/_includes/docs_variables_table.html new file mode 100644 index 0000000..5e8717f --- /dev/null +++ b/_includes/docs_variables_table.html @@ -0,0 +1,18 @@ +
+ + + + + + + + + {% for var in include.scope -%} + + + + + {% endfor -%} + +
VariableDescription

{{ var.name }}

{{- var.description -}}

+
\ No newline at end of file diff --git a/_includes/docs_version_badge.html b/_includes/docs_version_badge.html new file mode 100644 index 0000000..1442d74 --- /dev/null +++ b/_includes/docs_version_badge.html @@ -0,0 +1 @@ +{{ include.version }} \ No newline at end of file diff --git a/assets/gif/windows-developer-settings.gif b/assets/gif/windows-developer-settings.gif new file mode 100644 index 0000000..bacced5 Binary files /dev/null and b/assets/gif/windows-developer-settings.gif differ diff --git a/assets/images/jekyll-seo-preview.png b/assets/images/jekyll-seo-preview.png new file mode 100644 index 0000000..ea45f44 Binary files /dev/null and b/assets/images/jekyll-seo-preview.png differ diff --git a/assets/images/jekyll-seo-snippet.png b/assets/images/jekyll-seo-snippet.png new file mode 100644 index 0000000..bcd40e9 Binary files /dev/null and b/assets/images/jekyll-seo-snippet.png differ diff --git a/frontmatter.json b/frontmatter.json index fbe71c9..27a4abf 100644 --- a/frontmatter.json +++ b/frontmatter.json @@ -76,6 +76,21 @@ "title": "lastmod", "name": "lastmod", "type": "datetime" + }, + { + "title": "key", + "name": "key", + "type": "string" + }, + { + "title": "index", + "name": "index", + "type": "number" + }, + { + "title": "subcategory", + "name": "subcategory", + "type": "string" } ] }, diff --git a/index.md b/index.md index aa4c646..9d299a7 100644 --- a/index.md +++ b/index.md @@ -1,24 +1,23 @@ --- title: Hello World sub-title: Welcome to my landing site of this world -description: "This is the index.md file for the whole site and root " -preview: /images/nubi-yawn.png -excerpt: "" +description: This is the index.md file for the whole site and root +preview: "/images/nubi-yawn.png" layout: root keywords: - - Root - - Algolia - - Bootstrap - - Github - - GitHub Pages - - Jekyll - - TravisCI - - Web Development +- Root +- Algolia +- Bootstrap +- Github +- GitHub Pages +- Jekyll +- TravisCI +- Web Development tags: - - index +- index categories: - - hello world -lastmod: 2022-08-28T01:51:53.807Z +- hello world +lastmod: '2022-08-28 01:51:53 +0000' --- Hello world, and welcome to my site. Click on `Home` in the navigation bar to get started. @@ -38,6 +37,7 @@ Nothing to see here. Yet... but try clicking on the gear icon (or particles) for ## Features {: .collapse .collapsed .dev-settings } - [x] Github Pages compatibility +- [x] Jekyll Admin - [x] MathJax - [x] Bootstrap 5 CDN - [x] Algolia Search indexing diff --git a/pages/_docs/2023-04-14-wsl-dev-setup.md b/pages/_docs/2023-04-14-wsl-dev-setup.md index 4686017..dee1e75 100644 --- a/pages/_docs/2023-04-14-wsl-dev-setup.md +++ b/pages/_docs/2023-04-14-wsl-dev-setup.md @@ -2,7 +2,7 @@ title: Set up a WSL development environment author: null excerpt: null -description: Set up a WSL development environment using best practices from this set-by-step guide. Learn how to run Ubuntu, Visual Studio Code or Visual Studio, Git, Windows Credential Manager, MongoDB, MySQL, Docker remote containers and more. +description: Set up a WSL development environment using best practices. snippet: null categories: - notes @@ -10,12 +10,10 @@ tags: - notes meta: null draft: true -lastmod: 2022-01-10T21:54:00.053Z -source: 'https://github.com/MicrosoftDocs/wsl/blob/main/WSL/setup/environment.md' +lastmod: 2023-12-03T08:37:16.464Z +source: https://github.com/MicrosoftDocs/wsl/blob/main/WSL/setup/environment.md --- -# Set up a WSL development environment - A step-by-step guide to the best practices for setting up a WSL development environment. Learn how to run the command to install the default Bash shell that uses Ubuntu or can be set to install other Linux distributions, use basic WSL commands, set up Visual Studio Code or Visual Studio, Git, Windows Credential Manager, databases like MongoDB, Postgres, or MySQL, set up GPU acceleration, run GUI apps, and more. ## Get started @@ -113,9 +111,13 @@ We recommend using WSL with Windows Terminal, especially if you plan to work wit ## File storage -- To open your WSL project in Windows File Explorer, enter: `explorer.exe .`
*Be sure to add the period at the end of the command to open the current directory.* +- To open your WSL project in Windows File Explorer, enter: `explorer.exe .` + +*Be sure to add the period at the end of the command to open the current directory.* + +- [Store your project files on the same operating system as the tools you plan to use](../filesystems.md#file-storage-and-performance-across-file-systems). -- [Store your project files on the same operating system as the tools you plan to use](../filesystems.md#file-storage-and-performance-across-file-systems).
For the fastest performance speed, store your files in the WSL file system if you are working on them with Linux tools in a Linux command line (Ubuntu, OpenSUSE, etc). If you're working in a Windows command line (PowerShell, Command Prompt) with Windows tools, store your files in the Windows file system. Files can be accessed across the operating systems, but it may significantly slow down performance. +For the fastest performance speed, store your files in the WSL file system if you are working on them with Linux tools in a Linux command line (Ubuntu, OpenSUSE, etc). If you're working in a Windows command line (PowerShell, Command Prompt) with Windows tools, store your files in the Windows file system. Files can be accessed across the operating systems, but it may significantly slow down performance. For example, when storing your WSL project files: @@ -126,7 +128,7 @@ For example, when storing your WSL project files: ## Set up your favorite code editor -We recommend using Visual Studio Code or Visual Studio, as they directly support remote development and debugging with WSL. Visual Studio Code allows you to use WSL as a full-featured development environment. Visual Studio offers native WSL support for C++ cross-platform development. +We recommend using Visual Studio Code or Visual Studio, as they directly support remote development and debugging with WSL. Visual Studio Code allows you to use WSL as a full-featured development environment. Visual Studio offers native WSL support for C++ cross-platform development. ### Use Visual Studio Code @@ -140,7 +142,7 @@ Once VS Code is installed and set up, you can open your WSL project with a VS Co ### Use Visual Studio -Follow this step-by-step guide to [Get started using Visual Studio with WSL for C++ cross-platform development](/cpp/build/walkthrough-build-debug-wsl2). Visual Studio 2022 enables you to build and debug CMake projects on Windows, WSL distributions, and SSH connections from the same instance of Visual Studio. +Follow this step-by-step guide to [Get started using Visual Studio with WSL for C++ cross-platform development](/cpp/build/walkthrough-build-debug-wsl2). Visual Studio 2022 enables you to build and debug CMake projects on Windows, WSL distributions, and SSH connections from the same instance of Visual Studio. ![Select a target system in Visual Studio 2022](../media/vs-target-system.png) @@ -199,4 +201,4 @@ Follow this tutorial to learn how to set up and [run Linux GUI apps on WSL](../t - [Set up your development environment on Windows](/windows/dev-environment/): Learn more about setting up your development environment for your preferred language or framework, such as React, Python, NodeJS, Vue, etc. - [Troubleshooting](../troubleshooting.md): Find common issues, where to report bugs, where to request new features, and how to contribute to the docs. - [FAQs](../faq.yml): Find a list of frequently asked questions. -- [Release Notes](../release-notes.md): Review the WSL Release Notes for a history of past build updates. You can also find the [release notes for the WSL Linux Kernel](../kernel-release-notes.md). \ No newline at end of file +- [Release Notes](../release-notes.md): Review the WSL Release Notes for a history of past build updates. You can also find the [release notes for the WSL Linux Kernel](../kernel-release-notes.md) diff --git a/pages/_docs/2023-04-15-wsl-setup-with-vscode.md b/pages/_docs/2023-04-15-wsl-setup-with-vscode.md index d7472ac..b70e5b5 100644 --- a/pages/_docs/2023-04-15-wsl-setup-with-vscode.md +++ b/pages/_docs/2023-04-15-wsl-setup-with-vscode.md @@ -11,12 +11,10 @@ tags: meta: null keywords: wsl, windows, windowssubsystem, gnu, linux, bash, vs code, remote extension, debug, path, visual studio draft: true -lastmod: 2022-05-21T23:56:40.448Z -source: 'https://github.com/MicrosoftDocs/WSL/blob/main/WSL/tutorials/wsl-vscode.md' +lastmod: 2023-12-03T08:37:14.103Z +source: https://github.com/MicrosoftDocs/WSL/blob/main/WSL/tutorials/wsl-vscode.md --- -# Get started using Visual Studio Code with Windows Subsystem for Linux - Visual Studio Code, along with the WSL extension, enables you to use WSL as your full-time development environment directly from VS Code. You can: * develop in a Linux-based environment diff --git a/pages/_docs/doc-index.md b/pages/_docs/doc-index.md index 31c2d2b..3cb105a 100644 --- a/pages/_docs/doc-index.md +++ b/pages/_docs/doc-index.md @@ -12,12 +12,58 @@ sidebar: toc: true toc_sticky: true date: 2021-09-24T19:32:44.876Z -lastmod: 2023-03-11T01:52:55.548Z +lastmod: 2023-12-03T01:21:22.098Z draft: true --- These are the docs ## Jekyll +[official docs](https://jekyllrb.com/docs/) +```sh +git submodule add https://github.com/jekyll/jekyll.git jekyll-docs + +``` + + +```sh +cd jekyll-docs/docs/_docs +git sparse-checkout init --cone +git sparse-checkout set jekyll-docs/docs/_docs +git sparse-checkout set docs/_docs + +``` + +```html + +{{ include.version }} +``` + + +```html + + +
+ + + + + + + + + {% for var in include.scope -%} + + + + + {% endfor -%} + +
VariableDescription

{{ var.name }}

{{- var.description -}}

+
+ +``` + + ## Bootstrap diff --git a/pages/_docs/jekyll-seo.md b/pages/_docs/jekyll-seo.md new file mode 100644 index 0000000..fee424c --- /dev/null +++ b/pages/_docs/jekyll-seo.md @@ -0,0 +1,197 @@ +--- +key: tutorial +title: Jekyll - SEO +index: 8131 +subcategory: jekyll +date: 2023-12-04T19:48:04.694Z +tags: + - SEO + - CDN + - DNS +lastmod: 2023-12-04T22:41:17.301Z +slug: jekyll-seo +description: This is a tutorial about how to optimize the website to improve the rankings. +draft: true +categories: + - jekyll +preview: /images/jekyll-seo-preview.png +sub-title: SEO Optimization using Jekyll +author: Amr +excerpt: Search engine optimization (`SEO`) is the process of increasing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine. +snippet: /images/jekyll-seo-snippet.png +--- + +[Google Search Docs](https://developers.google.com/search) + +SEO (Search Engine Optimization) optimization is a crucial aspect for any website, and this is no different for sites built with Jekyll, the popular static site generator. By nature, Jekyll offers a lean and fast-loading website structure, which is a positive factor for SEO. However, there are specific strategies you can employ to further enhance your Jekyll site's SEO. + +1. **Optimizing Content**: The cornerstone of SEO is high-quality, relevant content. With Jekyll, you can easily manage content through Markdown files, ensuring that your text is clear, well-structured, and includes appropriate keywords. + +2. **URL Structure**: Jekyll allows for customization of URL structures. By using meaningful and keyword-rich URLs, you can make your pages more understandable to search engines and users. + +3. **Meta Tags**: Incorporate meta tags for titles and descriptions in your Jekyll site's HTML templates. These tags help search engines understand the content of your pages and display them appropriately in search results. + +4. **Mobile Responsiveness**: Jekyll supports responsive design themes, which is vital since mobile-friendliness is a significant ranking factor for search engines. + +5. **Loading Speed**: Jekyll generates static sites, which generally load faster than dynamic websites. You can further optimize this by minimizing CSS, JavaScript, and image sizes. + +6. **Sitemaps and Robots.txt**: Use Jekyll plugins to generate sitemaps automatically and manage robots.txt files, ensuring search engines can efficiently crawl and index your site. + +7. **Social Media Integration**: Integrating social media sharing options can increase the visibility of your content, indirectly boosting your SEO efforts. + +8. **Analytics**: Incorporate tools like Google Analytics to track your site’s performance, understand your audience better, and fine-tune your SEO strategies. + +9. **Regular Updates**: Regularly updating your website with fresh content can signal to search engines that your site is active and relevant. + +By implementing these strategies, you can significantly improve your Jekyll site's SEO, making it more visible and accessible to your target audience. + +## 1. SEO + +### 1.1 robots.txt + +Use Jekyll plugins to generate sitemaps automatically and manage robots.txt files, ensuring search engines can efficiently crawl and index your site. + +I.e., Prevent web crawlers from specific content. + + +```sh +# e.g. /note. + +User-agent: * +Disallow: /note/ +Sitemap: http://{{ site.github_user }}.github.io/sitemap.xml + +User-agent: * +Disallow: /private/ +Disallow: /tmp/ +Disallow: /duplicate-content/ +Disallow: /under-development/ +Allow: /public-content/ +Disallow: /*.gif$ +Disallow: /*.xls$ + +# Sitemap location +Sitemap: https://www.yoursite.com/sitemap.xml + +# Specific rules for certain bots +User-agent: Googlebot +Disallow: /no-google/ + +User-agent: Bingbot +Disallow: /no-bing/ + +# Delay between successive requests (in seconds) +Crawl-delay: 10 + + +``` + +### 1.2 RSS Feed + +Edit /blog/atom.xml + +```html + +{%- raw -%} +--- +layout: nil +type: blog +--- + + + + + {{ site.blogtitle }} + + + {{ site.time | date_to_xmlschema }} + {{ site.url }} + + {{ site.author.name }} + {{ site.author.email }} + + + {% for post in site.posts %} + + {{ post.title }} + + {{ post.date | date_to_xmlschema }} + {{ site.url }}{{ post.id }} + {{ post.content | xml_escape }} + + {% endfor %} + + +{% endraw %} +``` + +![image](/assets/images/jekyll/8131/rssfeed.png) +### 1.3 Sitemap + +```xml +{%- raw -%} +--- +--- + + + {% for page in site.pages %} + {% if page.layout != nil and page.layout != 'feed' and page.url != '/note/' and page.url != '/index_note/' and page.url != '/index_tutorial/' and page.url != '/search/' and page.url != '/blog/atom.xml' and page.url != '/contact/'%} + + http://{{ site.github_user }}.github.io{{ page.url | remove: 'index.html' }} + + {% endif %} + {% endfor %} + + {% assign portfolios = site.portfolio %} + {% assign blogs = site.posts %} + {% assign posts = portfolios | concat: blogs %} + {% for post in posts %} + + http://{{ site.github_user }}.github.io{{ post.url | remove: 'index.html' }} + + {% endfor %} + + +{% endraw %} +``` + +![image](/assets/images/jekyll/8131/sitemap.png) + +## 2. Caching with CDN + +### 2.1 Create a new account in Cloudflare + +Add a new site, note the two name servers + +* miki.ns.cloudflare.com +* owen.ns.cloudflare.com + +### 2.2 Update Name server in GoDaddy + +Find your domain, click the three dot button, choose 'Manage DNS'. +![image](/assets/images/jekyll/8131/godaddy_mydomains.png) +Scroll down, see the Nameservers section, click 'Change' btton. +![image](/assets/images/jekyll/8131/godaddy_nameservers.png) +Select 'Custom' type and input two Cloudflare name servers. +![image](/assets/images/jekyll/8131/godaddy_changenameserver.png) +Done. +![image](/assets/images/jekyll/8131/godaddy_done.png) +You will receive an email from CloudFlare. +![image](/assets/images/jekyll/8131/cloudflare_notification.png) + +## 3. Move Javascript Files to Bottom + +Put javascript files to the bottom of the page can speed up the loading. + +## 4. Reference + +* [About robots.txt](https://www.robotstxt.org/robotstxt.html) +* [How to Use XML Sitemaps to Boost SEO](https://www.searchenginejournal.com/xml-sitemaps-seo/) +* [JEKYLL - GENERATING A SITEMAP.XML WITHOUT A PLUGIN](http://www.independent-software.com/generating-a-sitemap-xml-with-jekyll-without-a-plugin.html) +* [10 Must do Jekyll SEO optimizations](https://blog.webjeda.com/optimize-jekyll-seo/) +* [Free Secure Web: Jekyll & Github Pages & Cloudflare](https://martin.ankerl.com/2017/07/22/free-secure-web-jekyll-github-pages-cloudflare/) +* [How to Change Nameservers in GoDaddy?](https://www.webnots.com/how-to-change-nameservers-in-godaddy/) +* [How to Deploy Websites on Custom Domains using Cloudflare and Github Pages](https://medium.com/crowdbotics/annie-azana-how-to-deploy-websites-using-cloudflare-and-github-pages-c415c55fea36) +* [Fix Defer Parsing of Javascript Warning in WordPress Using Async](https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async) +* [Demo - Put Scripts at the Bottom](http://stevesouders.com/examples/rule-js-bottom.php) +* [Search engine optimization for GitHub Pages](https://help.github.com/en/articles/search-engine-optimization-for-github-pages) diff --git a/pages/_docs/jekyll/cannot-start-jekyll-at-specific-port.md b/pages/_docs/jekyll/cannot-start-jekyll-at-specific-port.md index 5b95ec8..1507820 100644 --- a/pages/_docs/jekyll/cannot-start-jekyll-at-specific-port.md +++ b/pages/_docs/jekyll/cannot-start-jekyll-at-specific-port.md @@ -7,7 +7,7 @@ date: 2016-01-17 tags: - Jekyll - Port -lastmod: 2022-06-11T18:15:41.001Z +lastmod: 2023-12-03T08:37:12.500Z --- @@ -15,32 +15,41 @@ lastmod: 2022-06-11T18:15:41.001Z > Handle error 'Address Already in Use' when starting Jekyll. ## 1. Issue of 'Address Already in Use' + I've set up my [GitHub Page website](http://{{ site.github_user }}.github.io/) locally. It works as expected. But sometimes, I'm unable to start Jekyll. I keep getting the following error after running 'jekyll serve' command. + ```raw jekyll 3.5.2 | Error: Address already in use - bind(2) for 127.0.0.1:4000 ``` + Port 4000 has already been occupied. To solve this issue, kill the process that is using this port. Find the process which is using port 4000. + ```raw -$ sudo lsof -i :4000 +sudo lsof -i :4000 ``` Kill the process with its id. + ```raw -$ sudo kill -9 +sudo kill -9 ``` + ![image](/assets/images/jekyll/8105/port.png){:width="700px"} Retry 'jekyll serve', the error 'Port Already in Use' is gone. ## 2. NoMachine Process + Similar problem - Port 4000 is occupied by NoMachine(nxd). + ```raw Johnny@Johnny-Mac:~$ sudo lsof -i :4000 COMMAND PID USER FD TYPE DEVICE SIZE/OFF NODE NAME nxd 11199 nx 3u IPv4 0x2fad2a11645a3de5 0t0 TCP *:terabase (LISTEN) nxd 11199 nx 4u IPv6 0x2fad2a115cded5bd 0t0 TCP *:terabase (LISTEN) ``` + Killing the thread won't work, because NoMachine's nxd process will keep restarting, with a new PID. Either you have to change the port for your app. Or, change the service port for NoMachine. NoMachine->Preferences->Connection preferences. ![image](/assets/images/jekyll/8105/nomachine_preferences.png){:width="700px"} ![image](/assets/images/jekyll/8105/nomachine_port.png){:width="700px"} @@ -48,22 +57,28 @@ Killing the thread won't work, because NoMachine's nxd process will keep restart We can also shutdown NoMachine and disable the automatic start at next boot via command line. On Linux: + ```raw sudo /etc/NX/nxserver --shutdown sudo /etc/NX/nxserver --startmode manual ``` + On Mac: + ```raw sudo /etc/NX/nxserver --shutdown sudo /etc/NX/nxserver --startmode manual ``` + On Windows: Open the CMD console as administrator and move to the bin folder under the NoMachine installation directory and run: + ```raw nxserver --shutdown nxserver --startmode manual ``` ## 3. References + * [TCPServer Error: Address already in use - bind(2)](https://stackoverflow.com/questions/10261477/tcpserver-error-address-already-in-use-bind2) * [Disabling the automatic start-up of NoMachine at boot time](https://www.nomachine.com/AR04L00800) diff --git a/pages/_docs/jekyll/continuously-deploy-jekyll-website-to-gitHub-pages-with-travis-ci.md b/pages/_docs/jekyll/continuously-deploy-jekyll-website-to-gitHub-pages-with-travis-ci.md index af215fa..04235fb 100644 --- a/pages/_docs/jekyll/continuously-deploy-jekyll-website-to-gitHub-pages-with-travis-ci.md +++ b/pages/_docs/jekyll/continuously-deploy-jekyll-website-to-gitHub-pages-with-travis-ci.md @@ -1,6 +1,6 @@ --- key: tutorial -title: Continuously Deploy Jekyll Website to GitHub Pages with Travis-CI +title: Continuously Deploy Jekyll to GitHub Pages with Travis-CI index: 8141 subcategory: jekyll date: 2017-12-10 @@ -8,23 +8,26 @@ tags: - Jekyll - Github Pages - Travis CI -lastmod: 2022-06-11T18:16:21.350Z +lastmod: 2023-12-03T09:00:57.880Z --- > Start continuous integration with Travis CI for Jekyll website. ## 1. GitHub Pages & Jekyll -I have my person website http://{{ site.github_user }}.github.io/ hosted on [Github Pages](https://pages.github.com/). I post new blogs by creating Markdown files(.md) and submit them to the repository on Github. Then, Github Pages(powered by [Jekyll](https://jekyllrb.com/)) starts to compile the entire website and publish it. In some cases, however, the compilation fails, and the new changes are not published. Then, GitHub Page will send a notification email to me. This email just reminds me that there is one build failure, but doesn't tell what is the root cause. +I have my person website http://{{ site.github_user }}.github.io/ hosted on [Github Pages](https://pages.github.com/). I post new blogs by creating Markdown files(.md) and submit them to the repository on Github. Then, Github Pages(powered by [Jekyll](https://jekyllrb.com/)) starts to compile the entire website and publish it. In some cases, however, the compilation fails, and the new changes are not published. Then, GitHub Page will send a notification email to me. This email just reminds me that there is one build failure, but doesn't tell what is the root cause. Another approach is to use third-party service(eg. Travis CI) to display Jekyll build error messages, which is also recommended by Github Pages. ## 2. Travis CI + [Travis CI](https://travis-ci.org) is a hosted, distributed continuous integration service used to build and test software projects hosted at GitHub. ## 3. Configuration of GitHub Page + Add a file named `Gemfile` in the root of the GitHub Pages repository with the following content: Gemfile + ```raw source 'https://rubygems.org' @@ -32,6 +35,7 @@ gem 'github-pages' ``` Add another file named `.travis.yml` to the root of the GitHub Pages repository with the following content: + ```yml language: ruby rvm: @@ -42,12 +46,14 @@ script: "bundle exec jekyll build" Submit these two files to GitHub repository. ## 4. Configuration on Travis CI -Access the home page of Travis CI - https://travis-ci.org, logon with your GitHub account. + +Access the home page of Travis CI - , logon with your GitHub account. ![image](/assets/images/jekyll/8141/travisci_account.png) All the public repositories will be displayed here. Find the Github Page repository and switch on for auto building. The only left thing to do is to make some changes to your repository. Travis CI starts building the website once it detects new changes are committed. ![image](/assets/images/jekyll/8141/travisci_activate.png) ## 5. Demo + Edit some files and submit them to GitHub. Few minutes later, you will receive one notification email from GitHub Page saying the page build failed. However, there is no detailed information of the failure. We don't know what is the exact error. ![image](/assets/images/jekyll/8141/notification_builderror.png) Then, you will get another notification email from Travis CI. It also reminds you that the build is failed. @@ -66,6 +72,7 @@ Scroll down, no error occurs this time. ![image](/assets/images/jekyll/8141/fix2.png) ## 6. Travis CI Dashboard + The current activated repositories are listed in the dashboard. ![image](/assets/images/jekyll/8141/dashboard.png) Click on the repository, we get the latest build. @@ -77,6 +84,7 @@ Build history. ![image](/assets/images/jekyll/8141/history2.png) ## 7. Reference + * [Travis CI to the Jekyll site](https://jekyllrb.com/docs/continuous-integration/travis-ci/) * [Viewing Jekyll build error messages](https://help.github.com/articles/viewing-jekyll-build-error-messages/) * [Build Error Sample](https://travis-ci.org/{{ site.github_user }}/{{ site.github_user }}.github.io/builds/315705267?utm_source=email&utm_medium=notification) diff --git a/pages/_docs/jekyll/deploying-jekyll-website-to-netlify.md b/pages/_docs/jekyll/deploying-jekyll-website-to-netlify.md index 12a8b27..06366d1 100644 --- a/pages/_docs/jekyll/deploying-jekyll-website-to-netlify.md +++ b/pages/_docs/jekyll/deploying-jekyll-website-to-netlify.md @@ -7,26 +7,34 @@ date: 2019-06-22 tags: - Jekyll - Netlify -lastmod: 2022-06-11T18:16:53.924Z +lastmod: 2023-12-03T08:41:00.908Z --- > Deploy static website built with Jekyll to Netlify. ## 1. Jekyll & GitHub Pages & Netlify + I'm using Jekyll to build my personal website [{{ site.github_user }}.github.io]({{ site.github_user }}.github.io). All its content are static, which are built by Jekyll. Currently, it is hosted on [GitHub Pages](https://pages.github.com/). It works fine, however, there are some limitations with GitHub Pages. For example, it is not possible to specify Http Header for caching. On the other hand, Netlify supports more features than GitHub Pages and it is also free. [Netlify](https://www.netlify.com/) is an online service which builds, deploys, and manages modern web projects. Netlify basically initiates its own kind of repository that pushes both to a Github repository and its own services. It offers hosting for front-end projects with many options. ## 2. Deploying Application From Github Repository + ### 2.1 Preparation + Since I'm deploying a Jekyll website, run the following commands in local repository to update `Gemfile.lock`. Netlify will use this file for the deployment. + ```raw bundle install bundle update ``` + ### 2.2 New Netlify Account -If you don't have netlify account yet, go to https://app.netlify.com/signup to create a Netlify account with your GitHub account. Once you have the account, follow the steps below to deploy static website to Netlify. + +If you don't have netlify account yet, go to [Netlify](https://app.netlify.com/signup) to create a Netlify account with your GitHub account. Once you have the account, follow the steps below to deploy static website to Netlify. + ### 2.3 New Site from GitHub + After login, you are in the app home page, click 'New site from Git'. ![image](/assets/images/jekyll/8143/app.png) Choose 'Github', next. @@ -43,12 +51,16 @@ Switch to 'Deploy' tab to monitor the status and check the logs. ![image](/assets/images/jekyll/8143/monitor.png) If no issue occurs, the publish will be done after few seconds(or minutes). ![image](/assets/images/jekyll/8143/published.png) + ### 2.4 Testing + Click on the green link. Our app is now running in the domain of Netlify. ![image](/assets/images/jekyll/8143/homepage.png) Try to switch other pages, all work fine. ![image](/assets/images/jekyll/8143/portfolio.png) + ### 2.5 Changing Site Name + Switch to Settings tab, scroll down and click the 'Change site name' button. ![image](/assets/images/jekyll/8143/settings.png) Change the name to '{{ site.github_user }}' and save. @@ -57,4 +69,5 @@ Access your site with the new URL, it should work. ![image](/assets/images/jekyll/8143/newname.png) ## 3. Reference + * [A Step-by-Step Guide: Jekyll 3.0 on Netlify](https://www.netlify.com/blog/2015/10/28/a-step-by-step-guide-jekyll-3.0-on-netlify/) diff --git a/pages/_docs/jekyll/deploying-personal-website-with-custom-domain.md b/pages/_docs/jekyll/deploying-personal-website-with-custom-domain.md index 4c6cc36..d6877dd 100644 --- a/pages/_docs/jekyll/deploying-personal-website-with-custom-domain.md +++ b/pages/_docs/jekyll/deploying-personal-website-with-custom-domain.md @@ -6,18 +6,20 @@ subcategory: jekyll date: 2019-06-21 tags: - Custom Domain -lastmod: 2022-06-11T18:16:53.926Z +lastmod: 2023-12-03T08:40:23.773Z --- > Setup personal website with Github page and custom domain. ## 1. Setup website in github page + Refer this post [Creating and Hosting a Personal Site on GitHub](http://jmcglone.com/guides/github-pages/) to create a repository on github and publish it to GitHub Pages. -For demo purpose, I will use the repository of my personal website, see https://github.com/{{ site.github_user }}/{{ site.github_user }}.github.io. +For demo purpose, I will use the repository of my personal website, see {{ site.github_user }}/{{ site.github_user }}.github.io. ## 2. Register domain from Godaddy -Visit https://www.godaddy.com, register account and search domains. + +Visit , register account and search domains. ![image](/assets/images/jekyll/8142/godaddy_searchdomain.png) Add the domain you're interested into shopping cart, and prepare to pay for it. ![image](/assets/images/jekyll/8142/godaddy_cart.png) @@ -25,7 +27,9 @@ After you finish the payment, congratulations, you own the domain! ![image](/assets/images/jekyll/8142/godaddy_domain.png) ## 3. Setup DNS + Now, it's time to setup DNS for your new domain. Add `A` record to point the new domain(eg. {{ site.github_user }}.github.io) to a specific IP. The below four IP addresses are for GitHub Pages. + * 185.199.108.153 * 185.199.109.153 * 185.199.110.153 @@ -35,6 +39,7 @@ In addition, add `CNAME` record to point the new domain(eg. {{ site.github_user ![image](/assets/images/jekyll/8142/godaddy_adddns.png) ## 4. Enable Custom Domain and SSL on GitHub + Go to the github repository. In Settings, input the custom domain and check 'Enforce HTTPS'. ![image](/assets/images/jekyll/8142/custom_domain.png){:width="700px"} @@ -44,5 +49,6 @@ Portfolio page. ![image](/assets/images/jekyll/8142/rongzhuang_portfolio.png) ## 5. Reference + * [How to Configure GoDaddy Custom Domains with GitHub Pages](https://medium.com/@supriyakankure/how-to-add-a-custom-domain-to-your-github-page-with-godaddy-84495781143e) * [Custom domains on GitHub Pages gain support for HTTPS](https://github.blog/2018-05-01-github-pages-custom-domains-https/) diff --git a/pages/_docs/jekyll/generating-diagrams-and-flowcharts-with-mermaid.md b/pages/_docs/jekyll/generating-diagrams-and-flowcharts-with-mermaid.md index 85aae9a..753e4be 100644 --- a/pages/_docs/jekyll/generating-diagrams-and-flowcharts-with-mermaid.md +++ b/pages/_docs/jekyll/generating-diagrams-and-flowcharts-with-mermaid.md @@ -8,33 +8,42 @@ tags: - Mermaid - Flowchart - Gantt -lastmod: 2022-06-04T17:35:42.077Z +lastmod: 2023-12-03T08:47:16.750Z --- > Generate diagrams on web page with Mermaid. ## 1. Mermaid + [Mermaid](https://mermaidjs.github.io/) a simple markdown-like script language for generating charts from text via javascript. ## 2. Using Mermaid on Web Pages + Two steps: + * Include mermaid js library file with script tag in the html page. * Define diagram with mermaid syntax on the web page. ### 2.1 Loading Mermaid -The preferred way to use Mermaid on a web page is by linking to the publicly available MathJax Content Delivery Network(CDN). This can be done by adding the following code snippet into the HTML header block (the code between and ) of your HTML or XHTML document: + +The preferred way to use Mermaid on a web page is by linking to the publicly available MathJax Content Delivery Network(CDN). This can be done by adding the following code snippet into the HTML header block (the code between `` and ``) of your HTML or XHTML document: + ```html ``` -* Go to https://unpkg.com/mermaid to search the latest version or specific version. + +* Go to to search the latest version or specific version. In addition, we need to call the `initialize` method. + ```html ``` + If you use dynamically loaded fonts that are loaded through CSS, such as Google fonts, mermaid should wait for the whole page to have been loaded. + ```html ``` + {% endraw %} ## 5. Reference + * [Creating previous and next links within a Jekyll Collection](http://stories.upthebuzzard.com/jekyll_notes/2017-02-19-prev-and-next-within-a-jekyll-collection.html) * [Previous Next Links for Jekyll Collections](https://gist.github.com/budparr/3e637e575471401d01ec) * [Jekyll Filters - Where and Group_By](https://blog.webjeda.com/jekyll-filters/) diff --git a/pages/_docs/jekyll/jekyll-progress-bar.md b/pages/_docs/jekyll/jekyll-progress-bar.md index 38359b8..80d9252 100644 --- a/pages/_docs/jekyll/jekyll-progress-bar.md +++ b/pages/_docs/jekyll/jekyll-progress-bar.md @@ -7,24 +7,33 @@ date: 2019-06-04 tags: - Nanobar - Progress Bar -lastmod: 2022-06-04T17:35:42.099Z +lastmod: 2023-12-03T08:47:34.515Z --- > Show progress bar when page is loading. ## 1. Progress Bar + [Nanobar](http://nanobar.jacoborus.codes/) is a very lightweight progress bar which generates a highly customizable top bar. ## 2. Generate Top Bar + ### 2.1 Download Nanobar + Download and extract the [latest release](https://github.com/jacoborus/nanobar/archive/master.zip). Unzip the package and copy the `nanobar.min.js` file your project or website folder, for example `/assets/js/nanobar.min.js`. + ### 2.2 Include Nanobar + Edit `_layouts/default.html`, insert script tag and set src to the path of the minimized version nonabar. + ```html ``` + ### 2.3 Nanobar in Html + Edit `_layouts/default.html`, add nanobar below the navigation bar. + ```html ... @@ -37,16 +46,22 @@ Edit `_layouts/default.html`, add nanobar below the navigation bar. ... ``` + ### 2.4 Customize Top Progress Bar + Add the following css for nanobar into `/assets/css/main.scss`. + ```css .nanobar .bar { margin-top: 56px; background: #1cc927; } ``` + ### 2.5 Invoke the Progress + Create nanobar with javascript and assign it to div with classname `nanobar`. Notice, the progress is dummy. It is fixed with three steps. + ```html ``` + ### 2.6 Test + Access any page, there is a green top bar below the navigation bar. ![image](/assets/images/jekyll/8113/progress_bar.png) ## 3. Reference + * [Adding Top Progress Bar to Websites](https://blog.webjeda.com/top-bar-website/) * [Nanobar - A lightweight progress bar](http://nanobar.jacoborus.codes/) * [Pro Sidebar Template with Bootstrap 4](https://bootsnipp.com/snippets/Q0dAX) diff --git a/pages/_docs/jekyll/jekyll-search-function-for-static-website.md b/pages/_docs/jekyll/jekyll-search-function-for-static-website.md index c946379..687d945 100644 --- a/pages/_docs/jekyll/jekyll-search-function-for-static-website.md +++ b/pages/_docs/jekyll/jekyll-search-function-for-static-website.md @@ -8,15 +8,15 @@ tags: - Search - Lunr.js draft: true -lastmod: 2022-06-04T17:35:42.098Z +lastmod: 2023-12-03T08:47:24.633Z --- > Search. ## 1. Search - ## 7. Reference + * [Jekyll search using lunr.js](https://learn.cloudcannon.com/jekyll/jekyll-search-using-lunr-js/) * [Lunrjs - Searching](https://lunrjs.com/guides/searching.html) * [Jekyll Search with Algolia and Webtasks](https://forestry.io/blog/search-with-algolia-in-jekyll/) diff --git a/pages/_docs/jekyll/jekyll-security.md b/pages/_docs/jekyll/jekyll-security.md index b8aebd3..e4908ba 100644 --- a/pages/_docs/jekyll/jekyll-security.md +++ b/pages/_docs/jekyll/jekyll-security.md @@ -6,22 +6,29 @@ subcategory: jekyll date: 2019-06-29 tags: - Security -lastmod: 2022-06-11T18:16:53.927Z +lastmod: 2023-12-03T09:00:54.463Z --- > Scan website security vulnerabilities and fix them. ## 1. Website Headers + ### 1.1 Websites + I have my personal website hosted on two domains, [{{ site.github_user }}.github.io](https://{{ site.github_user }}.github.io) and [{{ site.github_user }}.netlify.com](https://{{ site.github_user }}.netlify.com). The first one is hosted on [GitHub Pages](https://pages.github.com/), while the second one is hosted on [Netlify](https://www.netlify.com/). These two websites are powered by [Jekyll](https://jekyllrb.com/) and all their contents are totally static. Actually, they are using the same code base.The source codes are managed on GitHub in repository [https://github.com/{{ site.github_user }}/{{ site.github_user }}.github.io](https://github.com/{{ site.github_user }}/{{ site.github_user }}.github.io). Both sites are CI/CD with GitHub. If there is any change submitted to this repository, GitHub Pages and Netlify will compile and deploy the website automatically. + ### 1.2 Header Security -Visit [securityheaders.com](https://securityheaders.com) and scan headers for site https://{{ site.github_user }}.github.io. + +Visit [securityheaders.com](https://securityheaders.com) and scan headers for site https://{{ site.github_user }}.github.io.w ![image](/assets/images/jekyll/8133/header_githubpages.png) All the checks on header are failed. If we scan site https://{{ site.github_user }}.netlify.com, same result will be returned. + ### 1.3 Resolution + To fix these security issues, we need to make some change at server side. However, there is no way to do that on GitHub Pages, but it can be done on Netlify. PS: This is one of the reasons why I migrated this static website from GitHub Pages to Netlify. In the root directory of repository, create a file named `netlify.toml` with the following content. Ignore the `build` section and `cache-control` settings as of now. + ```toml [build] command = "jekyll build" @@ -42,12 +49,14 @@ In the root directory of repository, create a file named `netlify.toml` with the public, s-max-age=604800''' ``` + Submit this file, wait for a while to let Netlify deploy the change. Once this file is deployed, run the scan for https://{{ site.github_user }}.netlify.com. This time, we can see all tests for header security are passed. ![image](/assets/images/jekyll/8133/header_netlify_fixed.png) ## 2. SSL ## 7. Reference + * [How to Configure Better Web Site Security with Cloudflare and Netlify](https://developer.okta.com/blog/2019/04/11/site-security-cloudflare-netlify) * [12 Online Free Tools to Scan Website Security Vulnerabilities & Malware](https://geekflare.com/online-scan-website-security-vulnerabilities/) * [The netlify.toml File](https://www.netlify.com/docs/netlify-toml-reference/) diff --git a/pages/_docs/jekyll/jekyll-seo.md b/pages/_docs/jekyll/jekyll-seo.md index ccd6da6..0527fa6 100644 --- a/pages/_docs/jekyll/jekyll-seo.md +++ b/pages/_docs/jekyll/jekyll-seo.md @@ -8,21 +8,28 @@ tags: - SEO - CDN - DNS -lastmod: 2022-06-11T18:16:53.931Z +lastmod: 2023-12-03T08:47:31.567Z --- > Optimize the website to improve the rankings. ## 1. SEO + Search engine optimization (`SEO`) is the process of increasing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine. + ### 1.1 robots.txt + Avoid web crawler to visit specific content, eg. /note. + ```raw User-agent: * Disallow: /note/ ``` + ### 1.2 RSS Feed + Edit /blog/atom.xml + ```html {%- raw -%} --- @@ -56,8 +63,11 @@ type: blog {% endraw %} ``` + ![image](/assets/images/jekyll/8131/rssfeed.png) + ### 1.3 Sitemap + ```xml {%- raw -%} --- @@ -84,15 +94,20 @@ type: blog {% endraw %} ``` + ![image](/assets/images/jekyll/8131/sitemap.png) ## 2. Caching with CDN + ### 2.1 Create a new account in Cloudflare + Add a new site, note the two name servers + * miki.ns.cloudflare.com * owen.ns.cloudflare.com ### 2.2 Update Name server in GoDaddy + Find your domain, click the three dot button, choose 'Manage DNS'. ![image](/assets/images/jekyll/8131/godaddy_mydomains.png) Scroll down, see the Nameservers section, click 'Change' btton. @@ -105,9 +120,11 @@ You will receive an email from CloudFlare. ![image](/assets/images/jekyll/8131/cloudflare_notification.png) ## 3. Move Javascript Files to Bottom + Put javascript files to the bottom of the page can speed up the loading. ## 4. Reference + * [About robots.txt](https://www.robotstxt.org/robotstxt.html) * [How to Use XML Sitemaps to Boost SEO](https://www.searchenginejournal.com/xml-sitemaps-seo/) * [JEKYLL - GENERATING A SITEMAP.XML WITHOUT A PLUGIN](http://www.independent-software.com/generating-a-sitemap-xml-with-jekyll-without-a-plugin.html) diff --git a/pages/_docs/jekyll/personal-site.md b/pages/_docs/jekyll/personal-site.md deleted file mode 100644 index 8f195fd..0000000 --- a/pages/_docs/jekyll/personal-site.md +++ /dev/null @@ -1,39 +0,0 @@ ---- -key: tutorial -title: Personal Site -index: 8199 -subcategory: jekyll -date: 2020-01-20 -tags: - - Personal Site -lastmod: 2022-06-11T18:16:53.922Z ---- - -> Services/tools used for building personal site. - -## 1. Personal Site -My personal website can be accessed through following domains. These sites are all using the same source files. -* [{{ site.github_base_url }}](https://{{ site.github_base_url }}) - - - - No. | URL | Description ------|----------------------------------------------------|---------------------------------------- - 1 | https://github.com/{{ site.github_user }}/{{ site.github_user }}.github.io | Source code repository - 2 | https://{{ site.github_user }}.github.io/ | `Domain 1`, hosted by GitHub Pages - 3 | https://travis-ci.org/ | CI/CD for {{ site.github_user }}.github.io - 4 | https://{{ site.github_user }}.netlify.com/ | `Domain 2`, hosted by Netlify - 5 | https://www.netlify.com/ | CI/CD for {{ site.github_user }}.netlify.com - 6 | https://{{ site.github_user }}.github.io/ | `Domain 3`, hosted by Cloudflare - 7 | https://www.cloudflare.com/ | CDN for {{ site.github_user }}.github.io - 8 | https://www.godaddy.com/ | Domain service for {{ site.github_user }}.github.io - 9 | https://sharethis.com/ | Share buttons - 10 | https://disqus.com/ | Comments service - 11 | https://analytics.google.com | Track website traffic - 12 | https://jekyllrb.com/ | Comments service - 13 | https://highlightjs.org/ | Syntax highlighting - 14 | https://www.mathjax.org/ | JS engine for mathematics - 15 | https://mermaidjs.github.io/ | Charts generated from text via javascript - 16 | https://lunrjs.com/ | Lightweight full-text offline search - 17 | http://nanobar.jacoborus.codes/ | Lightweight progress bars - 18 | https://www.google.com/adsense/ | Google Ads diff --git a/pages/_posts/2023-12-04-robots-dot-txt.md b/pages/_posts/2023-12-04-robots-dot-txt.md new file mode 100644 index 0000000..ba3d2c7 --- /dev/null +++ b/pages/_posts/2023-12-04-robots-dot-txt.md @@ -0,0 +1,33 @@ +--- +title: robots dot txt +sub-title: "" +author: "" +excerpt: "" +description: "" +snippet: 2023-12-04T21:15:31.625Z +categories: [] +tags: [] +draft: 2023-12-04T21:15:31.625Z +lastmod: 2023-12-04T22:40:40.615Z +type: Article +--- + + +A `robots.txt` file is used to instruct web robots (typically search engine robots) which pages on your website to crawl and which not to. Here's an example of a `robots.txt` file that you might use for a Jekyll site: + +```plaintext +User-agent: * +Disallow: /secret/ +Disallow: /private/ +Disallow: /tmp/ +Sitemap: https://www.yoursite.com/sitemap.xml +``` + +In this example: + +- `User-agent: *` means that the instructions apply to all web robots. +- `Disallow: /secret/` tells robots not to crawl pages under the `/secret/` directory. +- `Disallow: /private/` and `Disallow: /tmp/` do the same for these directories. +- `Sitemap: https://www.yoursite.com/sitemap.xml` provides the location of your site's sitemap, which is helpful for search engines to find and index your content. + +Remember to replace `https://www.yoursite.com/sitemap.xml` with the actual URL of your sitemap. Also, the `Disallow` entries should be adjusted based on the specific directories or pages you want to keep private or don't want to be indexed by search engines. \ No newline at end of file diff --git a/pages/_posts/2023-12-06-jekyll-seo.md b/pages/_posts/2023-12-06-jekyll-seo.md new file mode 100644 index 0000000..17c1a2c --- /dev/null +++ b/pages/_posts/2023-12-06-jekyll-seo.md @@ -0,0 +1,197 @@ +--- +key: tutorial +title: Jekyll - SEO +index: 8131 +subcategory: jekyll +date: 2023-12-04T19:48:04.694Z +tags: + - SEO + - CDN + - DNS +lastmod: 2023-12-06T23:14:00.458Z +slug: jekyll-seo +description: This is a tutorial about how to optimize the website to improve the rankings. +draft: true +categories: + - jekyll +preview: /images/jekyll-seo-preview.png +sub-title: SEO Optimization using Jekyll +author: Amr +excerpt: Search engine optimization (`SEO`) is the process of increasing the quality and quantity of website traffic by increasing the visibility of a website or a web page to users of a web search engine. +snippet: /images/jekyll-seo-snippet.png +--- + +[Google Search Docs](https://developers.google.com/search) + +SEO (Search Engine Optimization) optimization is a crucial aspect for any website, and this is no different for sites built with Jekyll, the popular static site generator. By nature, Jekyll offers a lean and fast-loading website structure, which is a positive factor for SEO. However, there are specific strategies you can employ to further enhance your Jekyll site's SEO. + +1. **Optimizing Content**: The cornerstone of SEO is high-quality, relevant content. With Jekyll, you can easily manage content through Markdown files, ensuring that your text is clear, well-structured, and includes appropriate keywords. + +2. **URL Structure**: Jekyll allows for customization of URL structures. By using meaningful and keyword-rich URLs, you can make your pages more understandable to search engines and users. + +3. **Meta Tags**: Incorporate meta tags for titles and descriptions in your Jekyll site's HTML templates. These tags help search engines understand the content of your pages and display them appropriately in search results. + +4. **Mobile Responsiveness**: Jekyll supports responsive design themes, which is vital since mobile-friendliness is a significant ranking factor for search engines. + +5. **Loading Speed**: Jekyll generates static sites, which generally load faster than dynamic websites. You can further optimize this by minimizing CSS, JavaScript, and image sizes. + +6. **Sitemaps and Robots.txt**: Use Jekyll plugins to generate sitemaps automatically and manage robots.txt files, ensuring search engines can efficiently crawl and index your site. + +7. **Social Media Integration**: Integrating social media sharing options can increase the visibility of your content, indirectly boosting your SEO efforts. + +8. **Analytics**: Incorporate tools like Google Analytics to track your site’s performance, understand your audience better, and fine-tune your SEO strategies. + +9. **Regular Updates**: Regularly updating your website with fresh content can signal to search engines that your site is active and relevant. + +By implementing these strategies, you can significantly improve your Jekyll site's SEO, making it more visible and accessible to your target audience. + +## 1. SEO + +### 1.1 robots.txt + +Use Jekyll plugins to generate sitemaps automatically and manage robots.txt files, ensuring search engines can efficiently crawl and index your site. + +I.e., Prevent web crawlers from specific content. + + +```sh +# e.g. /note. + +User-agent: * +Disallow: /note/ +Sitemap: http://{{ site.github_user }}.github.io/sitemap.xml + +User-agent: * +Disallow: /private/ +Disallow: /tmp/ +Disallow: /duplicate-content/ +Disallow: /under-development/ +Allow: /public-content/ +Disallow: /*.gif$ +Disallow: /*.xls$ + +# Sitemap location +Sitemap: https://www.yoursite.com/sitemap.xml + +# Specific rules for certain bots +User-agent: Googlebot +Disallow: /no-google/ + +User-agent: Bingbot +Disallow: /no-bing/ + +# Delay between successive requests (in seconds) +Crawl-delay: 10 + + +``` + +### 1.2 RSS Feed + +Edit /blog/atom.xml + +```html + +{%- raw -%} +--- +layout: nil +type: blog +--- + + + + + {{ site.blogtitle }} + + + {{ site.time | date_to_xmlschema }} + {{ site.url }} + + {{ site.author.name }} + {{ site.author.email }} + + + {% for post in site.posts %} + + {{ post.title }} + + {{ post.date | date_to_xmlschema }} + {{ site.url }}{{ post.id }} + {{ post.content | xml_escape }} + + {% endfor %} + + +{% endraw %} +``` + +![image](/assets/images/jekyll/8131/rssfeed.png) +### 1.3 Sitemap + +```xml +{%- raw -%} +--- +--- + + + {% for page in site.pages %} + {% if page.layout != nil and page.layout != 'feed' and page.url != '/note/' and page.url != '/index_note/' and page.url != '/index_tutorial/' and page.url != '/search/' and page.url != '/blog/atom.xml' and page.url != '/contact/'%} + + http://{{ site.github_user }}.github.io{{ page.url | remove: 'index.html' }} + + {% endif %} + {% endfor %} + + {% assign portfolios = site.portfolio %} + {% assign blogs = site.posts %} + {% assign posts = portfolios | concat: blogs %} + {% for post in posts %} + + http://{{ site.github_user }}.github.io{{ post.url | remove: 'index.html' }} + + {% endfor %} + + +{% endraw %} +``` + +![image](/assets/images/jekyll/8131/sitemap.png) + +## 2. Caching with CDN + +### 2.1 Create a new account in Cloudflare + +Add a new site, note the two name servers + +* miki.ns.cloudflare.com +* owen.ns.cloudflare.com + +### 2.2 Update Name server in GoDaddy + +Find your domain, click the three dot button, choose 'Manage DNS'. +![image](/assets/images/jekyll/8131/godaddy_mydomains.png) +Scroll down, see the Nameservers section, click 'Change' btton. +![image](/assets/images/jekyll/8131/godaddy_nameservers.png) +Select 'Custom' type and input two Cloudflare name servers. +![image](/assets/images/jekyll/8131/godaddy_changenameserver.png) +Done. +![image](/assets/images/jekyll/8131/godaddy_done.png) +You will receive an email from CloudFlare. +![image](/assets/images/jekyll/8131/cloudflare_notification.png) + +## 3. Move Javascript Files to Bottom + +Put javascript files to the bottom of the page can speed up the loading. + +## 4. Reference + +* [About robots.txt](https://www.robotstxt.org/robotstxt.html) +* [How to Use XML Sitemaps to Boost SEO](https://www.searchenginejournal.com/xml-sitemaps-seo/) +* [JEKYLL - GENERATING A SITEMAP.XML WITHOUT A PLUGIN](http://www.independent-software.com/generating-a-sitemap-xml-with-jekyll-without-a-plugin.html) +* [10 Must do Jekyll SEO optimizations](https://blog.webjeda.com/optimize-jekyll-seo/) +* [Free Secure Web: Jekyll & Github Pages & Cloudflare](https://martin.ankerl.com/2017/07/22/free-secure-web-jekyll-github-pages-cloudflare/) +* [How to Change Nameservers in GoDaddy?](https://www.webnots.com/how-to-change-nameservers-in-godaddy/) +* [How to Deploy Websites on Custom Domains using Cloudflare and Github Pages](https://medium.com/crowdbotics/annie-azana-how-to-deploy-websites-using-cloudflare-and-github-pages-c415c55fea36) +* [Fix Defer Parsing of Javascript Warning in WordPress Using Async](https://www.collectiveray.com/defer-parsing-of-javascript-wordpress-async) +* [Demo - Put Scripts at the Bottom](http://stevesouders.com/examples/rule-js-bottom.php) +* [Search engine optimization for GitHub Pages](https://help.github.com/en/articles/search-engine-optimization-for-github-pages) diff --git a/pages/_quests/init_world/2023-11-23-character-building.md b/pages/_quests/init_world/2023-11-23-character-building.md index 85c49c6..7070667 100644 --- a/pages/_quests/init_world/2023-11-23-character-building.md +++ b/pages/_quests/init_world/2023-11-23-character-building.md @@ -4,7 +4,7 @@ description: null author: null excerpt: null date: 2023-11-23T18:10:54.834Z -lastmod: 2023-11-25T21:09:56.651Z +lastmod: 2023-12-03T08:47:29.067Z draft: true tags: [] categories: [] @@ -22,6 +22,7 @@ slug: character-building A wise approach indeed! Building your character in the IT realm means equipping yourself with the right tools and environment. Let's shape your initial loadout: ### 1. **Choosing Your Operating System** + - **Windows**: Familiar to many and supports a wide range of software. Ideal for beginners and those interested in .NET development or gaming. - **Linux**: Preferred in server environments and for development, especially open-source. Offers great control and customization. - **macOS**: Popular among developers, especially for iOS development. Offers a Unix-based environment with a polished interface. @@ -29,45 +30,53 @@ A wise approach indeed! Building your character in the IT realm means equipping **Action Step**: Pick an OS that aligns with your interests and goals. You can dual-boot or use virtual machines to experience the best of multiple worlds. ### 2. **Setting Up Your Development Environment** + - **Text Editor**: Tools like Visual Studio Code, Sublime Text, or Atom are great for coding. - **IDE (Integrated Development Environment)**: If you're leaning towards a specific programming language, choose an IDE that supports it well (e.g., PyCharm for Python, IntelliJ IDEA for Java). **Action Step**: Install a text editor or an IDE based on the programming languages you're interested in. ### 3. **Learning Basic Command Line** + - **Windows**: Get familiar with Command Prompt and PowerShell. - **Linux/macOS**: Practice using the Terminal. **Action Step**: Start using the command line for simple tasks like navigating directories, creating files, and running scripts. ### 4. **Version Control System** + - **Git**: Essential for tracking changes in code and collaborating with others. **Action Step**: Install Git and try basic commands like `git clone`, `git add`, `git commit`, and `git push`. ### 5. **Understanding Basic Networking** + - Tools like `ping`, `traceroute`, and `netstat` are fundamental. **Action Step**: Use these tools to understand how your computer connects to networks and the internet. ### 6. **Virtualization Software** + - For experimenting with different OSs and setups, use tools like VirtualBox or VMware. **Action Step**: Install a virtualization tool and try running a different OS. ### 7. **Basic Security Tools** + - Install a reputable antivirus and learn about basic security practices like using strong passwords and enabling firewalls. **Action Step**: Secure your system and practice safe browsing habits. ### 8. **Cloud Services Account** + - Create a free tier account on AWS, Google Cloud, or Azure to start exploring cloud services. **Action Step**: Follow a tutorial to deploy a simple cloud application. ### 9. **Learning Resources** + - Gather books, online courses, and tutorials relevant to your chosen path. **Action Step**: Dedicate a specific time for learning and practicing new skills. -By preparing your environment and tools, you're setting the stage for a successful journey in IT. Each tool and skill you acquire is like adding a new spell to your spellbook, making you more prepared for the challenges ahead. Happy adventuring! 🧙‍♂️💻🔮 \ No newline at end of file +By preparing your environment and tools, you're setting the stage for a successful journey in IT. Each tool and skill you acquire is like adding a new spell to your spellbook, making you more prepared for the challenges ahead. Happy adventuring! 🧙‍♂️💻🔮 diff --git a/pages/_quests/init_world/2023-11-23-it-fundamentals.md b/pages/_quests/init_world/2023-11-23-it-fundamentals.md index 8560a06..96e9961 100644 --- a/pages/_quests/init_world/2023-11-23-it-fundamentals.md +++ b/pages/_quests/init_world/2023-11-23-it-fundamentals.md @@ -4,7 +4,7 @@ description: null author: null excerpt: null date: 2023-11-23T17:51:07.025Z -lastmod: 2023-11-23T17:51:29.937Z +lastmod: 2023-12-03T08:47:27.790Z draft: true tags: [] categories: [] @@ -16,11 +16,13 @@ slug: fundamentals Absolutely! Hands-on exercises are like spells and incantations – they're best learned by doing. Let's start with some foundational IT skills and practical exercises to get you going: ### 1. **Basic Computer Skills** + - **Exercise**: Organize your files and folders. - Create a new folder structure on your computer. - Organize your documents, images, and other files into these folders. ### 2. **Operating Systems (OS) Basics** + - **Exercise for Windows**: Learn to navigate the Control Panel and Task Manager. - Explore different settings in the Control Panel. - Open the Task Manager and familiarize yourself with different tabs like Processes, Performance, and Services. @@ -30,43 +32,50 @@ Absolutely! Hands-on exercises are like spells and incantations – they're best - Practice basic Linux commands: `pwd`, `ls`, `cd`, `mkdir`, `rm`. ### 3. **Networking Fundamentals** + - **Exercise**: Explore your home network. - Find out your computer’s IP address and default gateway. - Log into your router’s admin page (usually through the default gateway IP). - Explore settings and understand terms like DHCP, DNS, and NAT. ### 4. **Basic Programming with Python** + - **Exercise**: Write a simple Python script. - Install Python on your computer. - Write a script that takes user input and prints a personalized greeting. - Explore Python libraries by writing a script that fetches and displays the current weather from an online API. ### 5. **Scripting and Automation** + - **Exercise for Windows**: Write a basic Batch script. - Create a script that cleans up temporary files from your computer. - **Exercise for Linux**: Write a Bash script. - Create a script that lists all files in a directory and sorts them by size. ### 6. **Introduction to Cloud Computing** + - **Exercise**: Create a free account on a cloud platform like Google Cloud Platform (GCP) or AWS. - Explore the dashboard and familiarize yourself with the interface. - Follow a tutorial to deploy a simple 'Hello World' application. ### 7. **Virtualization and Containers** + - **Exercise**: Create a Docker container. - Install Docker on your machine. - Pull a simple image like `nginx` or `hello-world` from Docker Hub. - Run the container and access it via your web browser. ### 8. **Basic System Security** + - **Exercise**: Install and use an antivirus software. - Perform a full system scan. - Explore the settings and schedule regular scans. ### 9. **Version Control with Git** + - **Exercise**: Set up Git and practice basic commands. - Install Git. - Create a new repository and practice `git add`, `git commit`, `git push`. - Clone an existing repository from GitHub and explore its contents. -These exercises are your first steps. As you complete each one, you'll build a strong foundation in IT. Remember, the key is to practice regularly and keep challenging yourself with more complex tasks as you grow. Happy learning! 🌟💻🔧 \ No newline at end of file +These exercises are your first steps. As you complete each one, you'll build a strong foundation in IT. Remember, the key is to practice regularly and keep challenging yourself with more complex tasks as you grow. Happy learning! 🌟💻🔧 diff --git a/pages/_quests/init_world/hello-win/hello-win.md b/pages/_quests/init_world/hello-win/hello-win.md index 9224705..2a63536 100644 --- a/pages/_quests/init_world/hello-win/hello-win.md +++ b/pages/_quests/init_world/hello-win/hello-win.md @@ -3,17 +3,18 @@ Title: Init World - Win Author: bamr87 Layout: post permalink: /init-world/hello-win/ -Keywords: 'init, world' +Keywords: init, world Description: This is the init world. Dependancies: null -lastmod: '2021-12-16T01:24:13.911Z' +lastmod: 2023-12-03T08:47:22.762Z --- -# Powershell +## Powershell -cheatsheet: https://www.zerrouki.com/the-ps-cheatsheets/ +cheatsheet: + + + -https://docs.microsoft.com/en-us/windows/wsl/install-win10 -https://docs.microsoft.com/en-us/windows/wsl/interop ## run in Powershell as admin ```powershell @@ -36,23 +37,23 @@ wsl --set-default-version 2 ## Install distro -https://docs.microsoft.com/en-us/windows/wsl/install-manual + -Invoke-WebRequest -Uri https://aka.ms/wsl-debian-gnulinux -OutFile Debian.appx -UseBasicParsing +Invoke-WebRequest -Uri -OutFile Debian.appx -UseBasicParsing cd ~/Downloads Add-AppxPackage .\Debian.appx ## Setup new user and password -https://docs.microsoft.com/en-us/windows/wsl/user-support + ## Update Shell Override in Platformio ## Download/Install Apps -https://docs.microsoft.com/en-us/windows/package-manager/ + -winget https://github.com/microsoft/winget-cli/releases +winget # Core Universal OS Apps (Win/Linux/Mac) diff --git a/pages/_quests/personal-site.md b/pages/_quests/personal-site.md new file mode 100644 index 0000000..fd6f587 --- /dev/null +++ b/pages/_quests/personal-site.md @@ -0,0 +1,39 @@ +--- +key: tutorial +title: Personal Site +index: 8199 +subcategory: jekyll +date: 2020-01-20 +tags: + - Personal Site +lastmod: 2023-12-03T09:01:50.241Z +--- + +> Services/tools used for building personal site. + +## 1. Personal Site + +My personal website can be accessed through following domains. These sites are all using the same source files. + +* [{{ site.github_base_url }}](https://{{ site.github_base_url }}) + + No. | URL | Description +-----|----------------------------------------------------|---------------------------------------- + 1 | https://github.com/{{ site.github_user }}/{{ site.github_user }}.github.io | Source code repository + 2 | https://{{ site.github_user }}.github.io/ | `Domain 1`, hosted by GitHub Pages + 3 | | CI/CD for {{ site.github_user }}.github.io + 4 | https://{{ site.github_user }}.netlify.com/ | `Domain 2`, hosted by Netlify + 5 | | CI/CD for {{ site.github_user }}.netlify.com + 6 | https://{{ site.github_user }}.github.io/ | `Domain 3`, hosted by Cloudflare + 7 | | CDN for {{ site.github_user }}.github.io + 8 | | Domain service for {{ site.github_user }}.github.io + 9 | | Share buttons + 10 | | Comments service + 11 | | Track website traffic + 12 | | Comments service + 13 | | Syntax highlighting + 14 | | JS engine for mathematics + 15 | | Charts generated from text via javascript + 16 | | Lightweight full-text offline search + 17 | | Lightweight progress bars + 18 | | Google Ads diff --git a/pages/_quickstart/win-setup.md b/pages/_quickstart/win-setup.md index 8d15786..f44f87f 100644 --- a/pages/_quickstart/win-setup.md +++ b/pages/_quickstart/win-setup.md @@ -21,9 +21,45 @@ These are the steps to setup this jekyll site repository on a Windows PC. All th ## Windows Developer Settings -![](/assets/images/windows-developer-settings.png) +![](/assets/gif/windows-developer-settings.gif)) + +```powershell +# Enable Developer Mode, apply File Explorer settings, and change execution policy + +# Check if running with elevated privileges +if (-not ([Security.Principal.WindowsPrincipal] [Security.Principal.WindowsIdentity]::GetCurrent()).IsInRole([Security.Principal.WindowsBuiltInRole]::Administrator)) { + Write-Host "Please run this script as an administrator." + + # Pause before exiting + Read-Host "Press Enter to exit..." + exit +} + +# Enable developer mode +Write-Host "Enabling Developer Mode..." +reg add "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock" /v AllowDevelopmentWithoutDevLicense /t REG_DWORD /d 1 /f + +# Apply File Explorer settings +Write-Host "Applying File Explorer settings..." +reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v Hidden /t REG_DWORD /d 1 /f +reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v HideFileExt /t REG_DWORD /d 0 /f +reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v ShowFullPath /t REG_DWORD /d 1 /f +reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v ShowEncryptCompressedColor /t REG_DWORD /d 1 /f +reg add "HKCU\Software\Microsoft\Windows\CurrentVersion\Explorer\Advanced" /v AutoCheckSelect /t REG_DWORD /d 1 /f + +# Change execution policy to allow local PowerShell scripts +Write-Host "Changing execution policy..." +Set-ExecutionPolicy RemoteSigned -Scope CurrentUser -Force + +Write-Host "Developer mode has been enabled, File Explorer settings applied, and execution policy changed." +Write-Host "Please check the 'For developers' section in 'Update & Security' settings for confirmation." + +# Pause before exiting +Read-Host "Press Enter to exit..." + +``` + -![](/assets/images/windows-developer-settings-powershell.png) ### Install Winget diff --git a/zer0.md b/zer0.md new file mode 100644 index 0000000..e69de29