Built Website video blog and podcast with vite feat lit html element free download source code gratis

11 Sep 2022

#video blog #how #lit html #vite #source code #podcast #download #to #lit element #make #vlog #website #gratis #free #create #built #video #blog #cara

SEO website template theme for podcast video blog built with vite lit html element free download source code gratis.

Helloo... again..... 🤸 , we have develope a new source code project and you can download it for free on our github repo, on this project you can learn how to build modern website for your vlog video blog or podcast , so with this project you can embed your video from youtube and displaying on your simple blog or website, how to install ?? no need worry because you can see documentation on this blog.
This source code project is built using vite js and lit html + lit element , so you can learn how to make modern website with new technology using this project.

Jumpa lagi man teman... 🌭 saat nya kita makan hotdog !! yap.. kita akan bagiin lagi nih,, kode sumber terbuka untuk mu , agar mudah belajar mengenai gimana sih membuat website dengan teknologi saat ini terbaru dan kekinian, serta cepat dan top cer di lighthouse google, awal mencoba nya sih semper bingung juga , ini kita embed video loh pada website nya, tapi peform nya luar biasa sempurna, jadi bikin geleng geleng kepala nih sama vite dan lit , dan ini bagus juga dong untuk situs sama blog kamu yang pengen ngejar SEO.
Before download this source code you need to know how this site is super fast 🚀 and how the site is working, so let's get started now 👊.

SEO website template theme for podcast video blog built with vite lit html element free download source code gratis.

SEO website template theme for podcast video blog built with vite lit html element free download source code gratis.

We have test project on google ligthouse , and very surprised because we have a perfect score 😎 !! yeah... you can see on image.. how ligthouse check this project, pretty awesome, here because we use embed from youtube video and it's converted with lit html element to be perfect!!
I understand that sites with youtube embeds will usually get a bad score, but this is not the case with lit and vite in this project.
kita uda coba dong untuk tes ke lighthouse dan hasilnya keren, karena embed dari video youtube dan itu dikonversi dengan lit elemen menjadi sempurna!!
setau saya semua situs yang memiliki embed dari youtube pada biasanya akan mendapatkan skor yang buruk karena render yang sangat berat, tetapi hal ini tidak berlaku dengan lit dan vite di proyek ini. dengan kemampuan manipulasi dom nya wow... ini menjadi spektakuler !!

SEO website template theme for podcast video blog built with vite lit html element free download source code gratis.

And the next is a simple initial display, to display all posts from our video blog or podcast, so later after you fill in the data, everything will be displayed here, yes.. just change it and edit it according to your needs. and later all the titles or titles of your blog's video podcasts will be entered on this main page. Later, visitors to your blog's website click on it and they will get information about vlog and podcast information including embedding videos from YouTube.
Dan selanjutnya adalah tampilan awal yang simple aja sih , untuk display semua post dari video blog atau podcast kita, jadi nanti setelah kamu isikan pada data akan ditampilin semua di sini yes.. cukup ubah aja dan edit aja deh sesuaikan ama kebutuhan kamu. dan nantinya semua judul atau title dari podcast video blog kamu akan masuk di halaman utama ini.nantinya tinggal di klik oleh pengunjung website blog kamu dan akan mendapatkan informasi keterangan mengenai informasi vlog dan podcast include embed video dari youtube.

SEO website template theme for podcast video blog built with vite lit html element free download source code gratis.

The detailed display of the video blog podcast is also kept simple, with pop ups appearing directly with animations to display information about videos and blogs, plus there are videos from YouTube that visitors can play.
Tampilan detail mengenai podcast video blog pun juga dibuat simple , dengan langsung muncul via pop up dengan animasi untuk menampilkan informasi mengenai video dan blog , plus ada video dari youtube yang bisa diputar pengunjung.

INSTALLATION

Before you download this source code project, for first we need third party apps to work with this project so we need node js because vite js and lit on this project working with node,then we need to download code editor, so we can use visual code studio for best solutions.
Baiklah man teman... sebelum melangkah lebih jauh lagi, kita perlu melakukan installasi beberapa aplikasi penunjang seperti node js dan kode editor untuk bekerja melakukan editing pada kode sumber terbuka ini, jadi kalian bisa mengunduh pada daftar dibawah ini ya..
Node Download →
Visual Code Editor Download →
After download all app, you can install it on your device, just run next and next to finish your installation, after installation success , you can open terminal bash, or press windows logo on keyboard then type cmd, then you will see comand prompt, and now we can run this command node -v for check node version you have install on your device, and you can check npm version by run this command npm -v.
Oke after you have successfully install all apps, now you can download source code project on our github repo.

Donwload Source code vite lit podcast vlog website
Github Download
Clone with terminal just run

git clone https://github.com/mesinkasir/vite-lit-blog-video-podcast.git

Contibution with donation for support our team dev make other source code for the world.

Buy me a coffee ☕️ ❤️ ✌🏻
with moneygram or western union
BANK CENTRAL ASIA
ACCOUNT NO : 0181884109
ACCOUNT NAME : SUCI CHANIFAH
IBAN/SWIFT CODE : CENAIDJA
Donate Now

Okay.. after you have download or clone source code repo now you need to create a new folder project on desktop, and name it with your project for example vitelit-podcast , after create project folder, now you can extarct all file download in here... then we need to open terminal for accsess source code project (vitelit-podcast) then run cd C:\Users\pcname\Desktop\vitelit-podcast.
after we have accsess project folder using terminal now we need to install app, so you can run npm install ,after installation success now you can open this project on your visual code studio , run code . for open this project on your visual code, and back again to terminal... now we can run this Built Website video blog and podcast with vite feat lit html element free download source code gratis on your devices, so you can run npm run dev , then open localhost:5178 via web browser, and congratulations success to run and install this web app.

WORK WITH SOURCE CODE

OKay... now we need to change and edit article content, so you can visit on /src/layout/start/fitur.js , scroll down and you will see all content article in here... you can change this content and video with your own...
Format code :



 id: use id with consecutive number

 title: for title for your podcast video blog

 description: for description about your post vlog and podcast

 content: this is for content article

 text1: this is for content article

 text2: this is for content article

 text3: this is for content article

 video: copy and paste embed youtube url - use the back of the link

example youtube video is https://www.youtube.com/watch?v=SwikkYbrtdU - you just need to copy SwikkYbrtdU and paste on video:

Oke after you have change all content and video, now you need to setup about your SEO website, so you can visit on public/seo.js open with code editor and change title description with your website, and save it.

DEPLOY SOURCE CODE PROJECT LIVE

After you have change any code and edit content article video, now you can run this project on your server, how to do it... you just need to build to production mode. so you can run npm run build , then you will see dist folder, now you can use dist folder and upload on your hosting , you can use cpanel hosting or use static host like netlify,firebase,or vercel.

If you want , you can change and learn about vite and lit html element on our live codding in here... just run and change any code with you needed in here...

BONUS CONTENT !!
V for vendeta vite lit source code →
All source code project free download →
Mesin kasir terbaru →

« Previous