Buat Portofolio / Blog / Website menggunakan Devlopr

Halo semuanya ! 🤠

Pada artikel ini, saya ingin berbagi tentang bagaimana Anda dapat membuat situs web dengan mudah menggunakan Devlopr- Jekyll yang dibangun untuk Pengembang – devlopr-jekyll (dibuat oleh saya!), Dan Anda dapat menghostingnya secara gratis menggunakan Halaman Github atau Netlify dengan menggunakan hanya 5 langkah sederhana. Karena devlopr adalah Open Source. Seseorang dapat dengan mudah berkontribusi dalam meningkatkannya juga 🙂

tangkapan layar (1) .png

Tema Devlopr Jekyll (Demo) – https://devlopr.netlify.com

Langkah 1. Garpu repo – klik di sini

fork1.png

Langkah 2. Gunakan your-github-username.github.io sebagai repo baru (Ganti nama-github-Anda dengan milik Anda). Ingat jika Anda menggunakan nama selain nama-github-username.github.io, blog Anda akan dibuat menggunakan cabang gh-pages.

fork2.png

Langkah 3. Kloning repo secara Lokal:

Menggunakan browser, buka repo Anda dan salin url klon:

fork32.png

 $ git clone https://github.com/yourusername/yourusername.github.io $ cd yourusername.github.io $ code .

Langkah 4. Edit file _config.yml (Pengaturan Konfigurasi)

Memperbarui Pengaturan Config:

Ini adalah contoh pengaturan konfigurasi, ganti nilai untuk Blog Anda (sesuai):

_config.yml

 title : My Blog # Title of the Blog goes here subtitle : Blog built using devlopr # Sub-title of the Blog goes here description : >- # Description goes here u rl: "" # the base hostname & protocol for your site, eg https://example.github.io or https://example.com b aseurl: "" # the subpath of your site, eg /blog u rls: # Navigation Links - text: About url: /about - text: Blog url: /blog - text: Gallery url: /gallery - text: Shop url: /shop - text: Contact url : /contact # Author Details a uthor_logo: profile.png # Author Logo a uthor: John Doe # Author Name a uthor_bio: Hi, my name is John Doe. # Author Bio a uthor_email: "mail@johndoe.com" # Author Email a uthor_location: India # Author Location a uthor_website_url: "https://johndoe.com" # Author Website URL t ypewrite-text: Hi, Welcome to my Blog # Homepage Type Text a uthor_work_experiences: # Experiences (Companies you have worked with) - company_name: Google company_logo: google.png company_url: https://google.com designation: Software Engineer description: Worked on various Google Products visibility: true - company_name: Microsoft company_logo: microsoft.png company_url: https://microsoft.com designation: Azure Developer description: Worked on various Azure Cloud Products visibility: true a uthor_education_details: # Education Details Goes here - college_logo: mit.png college_name: MIT college_url: https://mit.org college_degree: CS Engineer description: Bachelor of Technology visibility: true a uthor_project_details: # Project Details Goes Here - project_thumbnail: gamershub.png project_title: Gamers Hub project_description: A Platform built for Gamers and Game Devs project_url: https://gamershub.in visibility: true - project_thumbnail: hack4r.PNG project_title: Hack4r project_description: A Platform built for Hackers and Penetration Testers project_url: https://hack4r.com visibility: true # social links t witter_username: johndoe g ithub_username: johndoe f acebook_username: johndoe l inkedin_username: johndoe b ehance_username: johndoe i nstagram_username: johndoe m edium_username: johndoe t elegram_username: johndoe d ribbble_username: johndoe f lickr_username: johndoe # for comments ( we got Disqus and Hyvor Commenting, uncomment the one you want to use ) d isqus_shortname: john-doe h yvor_talk_website_id: 244 # wakatime username (for coding activity tracking) w akatime_username: johndoe # mailchimp embedded form url (newsletter): m ailchimp_form_url: https://johndoe.us10.list-manage.com/subscribe/post?u=asfsaagd # formspree (contact form) f ormspree_email: johndoe@gmail.com # syntax highlighter m arkdown: kramdown h ighlighter: rouge p ermalink: pretty # Choose what to show ( can be true or false) s how_author_work_experiences: true s how_author_education_details: true s how_author_project_details: true # pagination of posts p aginate: 4 p er_page: 4 p aginate_path: "/blog/page/:num/" # minify # compress_html: # clippings: all # comments: ["<!-- ", " -->"] # endings: all # ignore: # envs: ['development'] # Archives # jekyll-archives: # enabled: # - categories # layout: archive # permalinks: # category: '/category/:name/' # Shop (Snipcart settings) c ollections: - products # Gallery d efaults: - scope: path: "gallery" values: permalink: /:path/:basename:output_ext # Build settings p lugins: - jekyll-paginate - jekyll-gist - jekyll-seo-tag - jekyll-sitemap - jekyll-menus # Exclude from processing. # The following items will not be processed, by default. # Any item listed under the `exclude:` key here will be automatically added to # the internal "default list". # # Excluded items can be processed by explicitly listing the directories or # their entries' file path in the `include:` list. # e xclude: - .sass-cache/ - .jekyll-cache/ - gemfiles/ - Gemfile - Gemfile.lock - node_modules/ - vendor/bundle/ - vendor/cache/ - vendor/gems/ - vendor/ruby/ d estination: ./build # setting build as default

Setelah Anda melakukan semua perubahan, saatnya untuk mendorong perubahan – komit ke Github dengan perubahan pengaturan konfigurasi:

 $ git add . $ git commit -m "my new blog using devlopr-jekyll" $ git push origin master

Langkah 5 – Aktifkan Halaman Github untuk Penerapan

Kunjungi pengaturan Github Repo Anda! Aktifkan cabang master sebagai Cabang Halaman Github:

fork6.png

Blog baru Anda akan siap dalam beberapa menit! Anda dapat mengunjungi situs Anda menggunakan [ https://yourusername.github.io ].

fork7.png

Panduan – Mengelola Situs Web Secara Lokal – Instal persyaratan pengembangan:

Siapkan lingkungan pengembangan lokal

  1. Git
  2. Ruby dan Bundler
  3. VSCode

Kami membutuhkan ruby dan bundler untuk membangun situs kami secara lokal. Setelah instalasi, periksa apakah berfungsi:

Untuk ruby:

 $ ruby -v ruby 2.5.1p57 ( 2018-03-29 revision 63029 ) [ x86_64-linux-gnu]

Untuk bundler:

 $ gem install bundler $ bundler -v Bundler version 2.1.4

Tambahkan jekyll:

 $ bundle add jekyll

Perintah ini akan menambahkan permata Jekyll ke Gemfile kita dan menginstalnya ke folder ./vendor/bundle/.

Anda dapat memeriksa versi jekyll

 $ bundle exec jekyll -v jekyll 4.0.0

Langkah 6. Instal dependensi gem dengan menjalankan perintah berikut

 $ bundle update $ bundle install

Langkah 7. Sajikan situs secara lokal dengan menjalankan perintah berikut di bawah ini:

 $ bundle exec jekyll serve --watch

atau Anda juga bisa melayani dengan menggunakan:

 $ jekyll serve

Kunjungi http: // localhost: 4000 untuk server pengembangan

fork4.png

fork41.png

Membuat Posting Blog

Mulailah mengisi blog Anda dengan menambahkan file .md Anda di _posts. devlopr-jekyll sudah memiliki beberapa contoh.

Contoh Posting YAML:

 --- layout : post title : " Sample Post" author : Sujay Kundu date : ' 2019-05-21 14:35:23 +0530' category : - jekyll summary : This is the summary for the sample post thumbnail : sample.png --- Hi ! This is sample post.

Contoh Halaman YAML:

 -------- layout : page title : Sample Page menus : header permalink : /sample-page/ -------- Hi ! This is sample page.

Mengedit lembar gaya – Kustomisasi

Anda hanya akan bekerja dengan satu file untuk mengedit / menambahkan gaya tema: assets / css / main.scss.

Terapkan Perubahan Anda

Setelah senang dengan perubahan blog Anda. Dorong perubahan Anda ke cabang master dan dalam beberapa menit Blog Anda sudah aktif dan berjalan!

May 15, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *