{"id":16786,"date":"2022-04-22T20:05:27","date_gmt":"2022-04-22T20:05:27","guid":{"rendered":"https:\/\/linuxways.net\/?p=16786"},"modified":"2022-04-22T20:05:27","modified_gmt":"2022-04-22T20:05:27","slug":"how-to-create-a-static-website-using-ubuntu-22-04-lts","status":"publish","type":"post","link":"https:\/\/linuxways.net\/de\/ubuntu\/how-to-create-a-static-website-using-ubuntu-22-04-lts\/","title":{"rendered":"How to Create a Static Website Using Ubuntu 22.04 LTS"},"content":{"rendered":"<h2>Introduction<\/h2>\n<p>In this article, I will help you to configure Jekyll on Ubuntu 22.04 LTS. My previous article showed how to install and run Jekyll on your Ubuntu machine. Jekyll is an amazing static site generator by developers for developers to publish artistic static websites. Instructions in this guide are exclusive to Ubuntu operating systems only. Do not try to use them on Debian or other distributions as packages might break them.<\/p>\n<h2>Prerequisites<\/h2>\n<p>You would need the following setup running already on your system.<\/p>\n<ul>\n<li>Ruby stack<\/li>\n<li>Gcc<\/li>\n<li>Make<\/li>\n<li>Bundler Gem<\/li>\n<li>Jekyll Gem<\/li>\n<\/ul>\n<p>Here is how to install them right away.<\/p>\n<pre>$ sudo apt-get install ruby-full build-essential zlib1g-dev<\/pre>\n<pre>$ gem install jekyll bundler<\/pre>\n<p>Now your system is ready to run Jekyll.<\/p>\n<h2>Configure Jekyll<\/h2>\n<h3><strong>Step 1. Create a new project<\/strong><\/h3>\n<p>Now I will need a simple command as stated below to create a new project and install the required gems and dependencies.<\/p>\n<pre>$ jekyll new jSite<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"864\" height=\"666\" class=\"wp-image-16787\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-217.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-217.png 864w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-217-300x231.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-217-768x592.png 768w\" sizes=\"auto, (max-width: 864px) 100vw, 864px\" \/><\/p>\n<p>All required gems and dependencies are now installed. The new website has been created.<\/p>\n<h3><strong>Step 2. Launch Jekyll Server<\/strong><\/h3>\n<p>It is launch time. You need to apply the following command to launch the Jekyll server in your browser as you can see below.<\/p>\n<pre>$ bundle exec jekyll serve<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"568\" height=\"231\" class=\"wp-image-16788\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-218.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-218.png 568w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-218-300x122.png 300w\" sizes=\"auto, (max-width: 568px) 100vw, 568px\" \/><\/p>\n<h3><strong>Step 3. Confirm the launch using a browser<\/strong><\/h3>\n<p>Launch your favorite browser to see if everything is working fine.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1310\" height=\"637\" class=\"wp-image-16789\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-219.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-219.png 1310w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-219-300x146.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-219-1024x498.png 1024w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-219-768x373.png 768w\" sizes=\"auto, (max-width: 1310px) 100vw, 1310px\" \/><\/p>\n<h3><strong>Step 4. Working with _config.yml File<\/strong><\/h3>\n<p>Now I will guide you to work with _config.yml file which keeps all of the configurations.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1006\" height=\"423\" class=\"wp-image-16790\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-220.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-220.png 1006w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-220-300x126.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-220-768x323.png 768w\" sizes=\"auto, (max-width: 1006px) 100vw, 1006px\" \/><\/p>\n<p>You are noticing that there are some critical settings to finish in the above screenshot. Here I will explain each of them.<\/p>\n<p>I will also add some extra variables to improve it further. Any of the data added in _config.yml file is considered a global variable.<\/p>\n<p><strong>title: <\/strong>Here you are supposed to add your website&#8217;s title. Let\u2019s be it LinuxWays.Net<\/p>\n<p><strong>email:<\/strong> A global email for many reasons. Change it to <a href=\"mailto:email@linuxways.net\">email@linuxways.net<\/a><\/p>\n<p><strong>description:<\/strong> This is the place where you introduce yourself globally. This can be used anywhere on the site then.<\/p>\n<p>Next, you will provide your domain name linked to your hosting.<\/p>\n<p><strong>url:<\/strong> \u201cyourdomain.com\u201d<\/p>\n<p>Now I will update social links as \u201clinuxways\u201d for both Github and Twitter.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"1003\" height=\"423\" class=\"wp-image-16791\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-221.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-221.png 1003w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-221-300x127.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-221-768x324.png 768w\" sizes=\"auto, (max-width: 1003px) 100vw, 1003px\" \/><\/p>\n<p>You can see the updated file now.<\/p>\n<p>I used nano to edit _config.yml file. You can use any available editor to use it.<\/p>\n<h3><strong>Step 5. Run Jekyll Server Again<\/strong><\/h3>\n<p>Now I am going to run the Jekyll server again to publish the site. First, save the file, and close the editor. You are good to serve the new website.<\/p>\n<pre>$ bundle exec jekyll serve<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" width=\"807\" height=\"621\" class=\"wp-image-16792\" src=\"http:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-222.png\" srcset=\"https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-222.png 807w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-222-300x231.png 300w, https:\/\/linuxways.net\/wp-content\/uploads\/2022\/04\/word-image-222-768x591.png 768w\" sizes=\"auto, (max-width: 807px) 100vw, 807px\" \/><\/p>\n<p>Our static website is ready now and running with max power. You are ready to edit HTML files and CSS to make it the best as desired.<\/p>\n<h2>Conclusion<\/h2>\n<p>In this guide, I walked you through with advanced configurations of Jekyll to customize it. You can add new CSS, HTML, and JavaScript to improve the website further or simply take an HTML template to improvise it. Ruby gems are not installable on Windows. Users often break their system while using <strong>ruby-full<\/strong> on Windows. It is best to avoid it.<\/p>","protected":false},"excerpt":{"rendered":"<p>Introduction In this article, I will help you to configure Jekyll on Ubuntu 22.04 LTS. My previous article showed how to install and run Jekyll on your Ubuntu&hellip;<\/p>","protected":false},"author":1,"featured_media":16801,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[892,978],"class_list":["post-16786","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ubuntu","tag-ubuntu-22-04","tag-website"],"_links":{"self":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/16786","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/comments?post=16786"}],"version-history":[{"count":0,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/posts\/16786\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media\/16801"}],"wp:attachment":[{"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/media?parent=16786"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/categories?post=16786"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/linuxways.net\/de\/wp-json\/wp\/v2\/tags?post=16786"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}