Information
Repository - github.com/Oskang09/oskayuzy
Site - love.oskadev.com
Development
With github actions, every night will run a script to get data from instagram, and pump into gist
. You can see the script at index.js
and action.yml
for workflow setting. For frontend it's using react
& vitejs
to do development. In workflow, it will get all images from instagram and push to gist
and generate gist
link which will display the images. For more information you can look into index.js .
Build
For github actions script have to build with @vercel/ncc
before push, frontend also have to build before push. Since my github pages is set to master
branch so it take from docs/
folder in master
branch. In public/
folder having CNAME
it's for custom domain setting ifn't the original setting will be overrided.
Make your own
- Update setting in
assets/setting.json
. - Run
yarn build
to build with new setting. - Rename title in
index.html
with your preferred title name. - Update images with yours in
assets/images/
folder. - Update repository name in
.github/workflows/schedule.yml
. - Add
GH_TOKEN
with your github token for updatinggist
. - Add
IG_USERNAME
andIG_PASSWORD
with your gallery ig username and password for login instagram account and retrieve posts. - Push to repository.
- Trigger the actions to fetch data from instagram.
- Here you go.
Reference
Component | Source |
Psyduck | codepen.io/tiffachoo/pen/abdLKaP |
Lion | codepen.io/thepandalion/pen/gjske |
Love Effect | codepen.io/vivinantony/pen/gbENBB |
Instagram Images | reactjsexample.com/3d-cover-flow-in-react |
Carousel | react-responsive-carousel |
Slideshow | css-tricks.com/snippets/jquery/simple-auto-.. |
Heartbeat | codepen.io/fivera/pen/rzepn |
Loader | loading.io/css |
Font | GoogleFonts - Fredoka One |
InstagramAPI | github.com/dilame/instagram-private-api |
View
Platform | View |
Desktop | ![]() |
Mobile | ![]() |