06 Apr 2022
New Mobile11ty eleventy build website android app
Build Generator static site and android app all in one with mobile11ty
Now we discuss about display , with use ionic mobile framework help your site very flexible , because we can build all in one modern website and mobile just use this framework, so with this concept we can build all in one website and android app very fast.
We have design this source code project for desktop and mobile , for desktop you can see you have a banner or image cover in header, then you have section area for displaying lastest post, then introduction about your site, and list of website page in here. this is automaticly fecth from your post article and page.
Then you can see on Mobile version is same display too.. with lastest post menu, intro menu, and page list in here, then you can see on footer we have tab menu for information.
Oke now how to install and work with this source code project ?? for first of course you need to install node js, because we work with node, so download node now . download node now →
After download node you can install it, then you can open shell terminal and run
node -vfor check node version you have installed, and you can check npm version with run
Oke now we need install eleventy globaly so you can open shell terminal and run
npx @11ty/eleventy. Then test installation with run
Oke next step we can download this source code on our github repo, so download now and get started.
or you can clone repo with run
git clone https://github.com/mesinkasir/mobile11ty.git
npm installwait for installation finish, then you can test this web app with run
npm run serveor you can run
npx @11ty/eleventy --serve, now open web browser and visit localhost:8080 , congratulations you have successfully to install mobile11ty in your device.
CONFIGURATION & WORK
now after installation success you need to change all configuration, so let's back to project folder and open _data folder then edit metadata.json files. you need edit this file with code editor, so you can download visual code studio for edit files, Download Visual Code Studio →
URL link your website
Cover Website for meta twittercard
Section for change website display design
cover for section cover
icon for icon cover
Menu for change navbar menu
menu1 for change display name on menu 1
menu2 for change display name on menu 2
menu3 for change display name on menu 3
menu4 for change display name on menu 4
icon1 for change icon on menu 1
icon2 for change icon on menu 2
icon3 for change icon on menu 3
icon4 for change icon on menu 4
url1 for change link on menu 1
url2 for change link on menu 2
url3 for change link on menu 3
url4 for change link on menu 4
For change icon you need to visit on https://ionic.io/ionicons select icon and then copy and paste icon name in icon menu.
Oke now we can create a new article post edit and delete , so you can visit on posts folder and you can see example article in here, you can copy and paste another page , then edit with your needed in here.so let's go build your mobile web and android app bundle with New Mobile11ty eleventy build website android app.
BUILD ANDROID APPAfter you have finished project with mobile11ty, now you can build android app too... for first of course we need android studio , so download android studio →
- Option 1 for simple and easy you can just convert using webview, you can use this option if you need just build android application and wana user download in your website, or you can shared android app . so if you need to build android app with webview you can read this article , how to build android webview →
- Option 2 if you need for upload your android application to google playstore, so for first you need have a google developer account, then you can build bundle app , use cordova and capacitor, you can read article how to build android app with cordova capacitor here →
BONUS CONTENT ELEVENTY PROJECT FREE DOWNLOAD :
Mobile11ty build android and website
Bootstrap11ty powerfull blog SEO
Text11ty for blogger
Thisis11ty wordpress thesis inspired
New modern cool11ty
All source code project free download →
Mesin kasir terbaru →
Contibution with donation for support our team dev make other source code for the world.Buy me a coffee ☕️ ❤️ ✌🏻