An open source personal website / portfolio generator
Explore the docs »
View Demo
·
Report Bug
·
Request Feature
Table of Contents
WebGen is an open source personal website / portfolio generator developed with ❤️. Portfolios or personal websites are a great way to demonstrate the competencies you would list on a resume or talk about in an interview — they allow you to show and not just tell. It is a multi-faceted way to organize your accomplishments, goals, aspirations, and personal thought. It showcases your personality to potential employers and organizations. It provides tangible proof of your skills and abilities and demonstrates to the employer that you are qualified for that specific job.
This summer I finally decided to update my website that I developed 2 years ago. However 2 years ago, I was just starting to learn about web development and hence hardcoded everything on my website to the point where it wasn't possible for me to update it this summer. Hence I tried to find some online website generators or tools to use. Much to my surprise, the only tool I found was this. This would have sufficed until it struck me that the usage of this tool would require git, Ruby and basic knowledge of web dev and it is pretty much only for CS students or professionals. Thus I developed WebGen, which allows users of any domain to develop their personal websites without requiring the knowledge of programming languages, tools or technologies. You can develop your website from scratch or select some pre-made themes and receive the html,css and js file in your email. We provide you with the source code of the website you developed so that you're at liberty to decide what you want to do with it. Mostly you would want to host your website somewhere GitHub, Netlify, Render, Vercel etc. ( Video guides are present to help you host your website ).
WebGen is built using the PERN ( PostgreSQL, Express, React and NodeJS ) stack.
To get a local copy up and running follow these simple steps.
This is the list of softwares required to run WebGen and how to install them.
-
docker ( Optional )
-
npm
npm install npm@latest -g
-
redis
- Linux
sudo apt update sudo apt install redis-server sudo systemctl start redis-server
- MacOS
brew update brew install redis redis-server /usr/local/etc/redis.conf
- Windows : How to Install and Run Redis
-
postgres
- Linux
sudo sh -c 'echo "deb http://apt.postgresql.org/pub/repos/apt $(lsb_release -cs)-pgdg main" > /etc/apt/sources.list.d/pgdg.list' wget --quiet -O - https://www.postgresql.org/media/keys/ACCC4CF8.asc | sudo apt-key add - sudo apt-get update sudo apt-get -y install postgresql sudo systemctl start postgresql
- MacOS
brew update brew install postgresql initdb /usr/local/var/postgres pg_ctl -D /usr/local/var/postgres start
- Windows : How to Install and Run PostgreSQL
-
Clone the repo
git clone https://github.com/Sid200026/WebGen.git
-
Change directory
cd WebGen -
Create a
.envand.env.productionfile with the same contentPORT=<Port on which to run the application> SECRET_KEY=<Secret key used to encrypt strings> EMAIL_USER=<Gmail ID from which to send emails to> EMAIL_PASSWORD=<Password from which to send emails to> DATABASE_USER=<User of the database> DATABASE_PASSWORD=<Password of the database> DATABASE_NAME=<Name of database to be used> DATABSE_HOST=<URL on which PostgreSQL server is running Eg: 127.0.01, database ( if using docker )> DATABASE_PORT=<Port on which database is running Eg. 5432> REDIS_HOST=<URL on which Redis server is running Eg: 127.0.01, redis ( if using docker )> REDIS_PORT=<Port on which Redis server is running Eg: 6379>
For example, if installing the application via npm, following is a valid env file
PORT=8000 SECRET_KEY=webgen EMAIL_USER=************gmail.com EMAIL_PASSWORD=************ DATABASE_USER=postgres DATABASE_PASSWORD=******** DATABASE_NAME=postgres DATABSE_HOST=localhost DATABASE_PORT=5432 REDIS_HOST=127.0.0.1 REDIS_PORT=6379
For example, if installing the application via docker, following is a valid env file
PORT=8000 SECRET_KEY=webgen EMAIL_USER=************gmail.com EMAIL_PASSWORD=************ DATABASE_USER=postgres DATABASE_PASSWORD=******** DATABASE_NAME=postgres DATABSE_HOST=database DATABASE_PORT=5432 REDIS_HOST=redis REDIS_PORT=6379
-
Create the user files
bash scripts/user_files.sh
-
Install the dependencies
npm install
-
Copy assets folder
bash scripts/asset_copy.sh
-
Run the backend server
npm run dev
-
Open another terminal and run the frontend server
npm run bundle
-
If you want to run both of them in the same terminal, run
npm run conc
-
Built the docker service
docker-compose build
-
Attach container to each of the services
docker-compose up -d
For FAQs, examples, guidelines please refer to the Documentation
See the open issues and roadmap for a list of proposed features (and known issues).
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
- Fork the Project
- Create your Feature Branch (
git checkout -b AmazingFeature) - Commit your Changes (
git commit -m 'feat(): Add some AmazingFeature') - Push to the Branch (
git push -u origin AmazingFeature) - Open a Pull Request
For a more detailed walkthrough, see CONTRIBUTING for more information.
Distributed under the MIT License. See LICENSE for more information.
Siddharth Singha Roy - @Sid200026 - siddharthsingharoy@gmail.com
Project Link: https://github.com/Sid200026/WebGen