A GatsbyJS blog starter.
Source code untuk blog saya. Dibuat menggunakan GatsbyJS dan ReactJS
- Easy editable content in Markdown files (posts, pages and parts)
- CSS with
styled-jsx
andPostCSS
- SEO (sitemap generation, robot.txt, meta and OpenGraph Tags)
- Social sharing (Twitter, Facebook, Google, LinkedIn)
- Comments (Disqus or Facebook)
- Images lazy loading and
webp
support (gatsby-image) - Post categories (category based post list)
- Full text searching (Algolia)
- Form elements and validation with
ant-design
- RSS feed
- 100% PWA (manifest.webmanifest, offline support, favicons)
- Google Analytics
- App favicons generator (node script)
- Easy customizable base styles via
theme
object generated fromyaml
file (fonts, colors, sizes) - React v.16.3 (gatsby-plugin-react-next)
- Components lazy loading (social sharing)
- ESLint (google config)
- Prettier code styling
- Webpack
BundleAnalyzerPlugin
- Gravatar image (optional) instead local Avatar/Logo image
- Create Post for now only tested on Linux, Mac, Unix-like :(
- Pagination 5 articles per page
Pastikan bahwa nodeJS telah terinstall pada komputer anda. Jika belum anda dapat menginstallnya dari sini NodeJS.
Kemudian install gatsby-cli dengan syntaks berikut,
npm install --global gatsby-cli
Info lebih lanjut dapat ditemukan dalam tautan berikut ini GatsbyJS.org
Install tema menggunakan command dibawah ini
gatsby new [NEW_SITE_DIRECTORY_FOR_YOUR_BLOG] https://github.com/ypraw/ypraw-blog-source.git
#contoh
gatsby new my_blog https://github.com/ypraw/ypraw-blog-source.git
arahkan ke folder yang telah dibuat lalu mulai dengan perintah dibawah ini untuk melihat tema.
cd my_blog \
gatsby develop
setelah prosesi generate selesai, buka browser anda lalu arahkan pada localhost:8000
atau 127.0.0.1:8000
, anda akan melihat tampilan web dengan mode developer.
untuk tahap produksi gunakan perintah berikut
gatsby build
perintah ini akan membuat folder (/public) yang siap diupload pada hosting yang anda gunakan.
Tema ini menggunakan beberapa service untuk beberapa fungsi seperti komentar, pencarian, dan google analitik. untuk mengakses service-service tersebut maka diperlukan beberapa konfigurasi. Pada folder root , buatlah sebuah file .env
dan isikan seperti berikut ini,
GOOGLE_ANALYTICS_ID=...
ALGOLIA_APP_ID=...
ALGOLIA_SEARCH_ONLY_API_KEY=...
ALGOLIA_ADMIN_API_KEY=...
ALGOLIA_INDEX_NAME=...
FB_APP_ID=...
PERINGATAN :
-
Pada dasarnya file .env akan di ignore oleh gitignore, pastikan kembali bahwa file
.gitignore
mengandung .env, jika belum tulis .env pada file .gitignore -
Jika anda tidak mengisi data Algolia pada file
.env
, maka proses build akan gagal, untuk itu anda diwajibkan untuk mendaftar algolia terlebih dahulu, algolia, sebagai catatan bagi anda yang masih mahasiswa, dosen, ataupun civitas akedemi lainnya yang memiliki email berdomain akademik seperti.ac.id
,.edu
, dsb gunakanlah fitur github education pack untuk mendapatkan beberapa package premium seperti github developer, domain namecheap dan algolia education pack disini
-
- Pada dasarnya tema default hanya membawa sistem komentar dari facebook. Untuk mengaktifkannya maka isikan id pada
FB_APP_ID
di file.env
seperti penjelasan sebelumnya. - Untuk mengaktifkan komentar sistem menggunakan disqus, isikan
disqusShortname
anda pada file config.js
- Pada dasarnya tema default hanya membawa sistem komentar dari facebook. Untuk mengaktifkannya maka isikan id pada
-
- Jalankan perintah berikut
contoh,npm run create-post [JUDUL] <space>[Kategori] <space> [Author]
npm run create-post "New Post" "Kategorinya" "ypraw"
You should take a look at this: Gatsby on Windows
-
Thanks to Base Theme develop by @greglobinski
- Fork the repo
- Create your feature branch (git checkout -b feature/fooBar)
- Commit your changes (git commit -am 'Add some fooBar')
- Push to the branch (git push origin feature/fooBar)
- Create a new Pull Request
MIT License
Copyright (c) 2017 gatsbyjs
Copyright (c) 2018 greg lobinski
Copyright (c) 2019 Yunindyo Prabowo
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.