DEV Community

Cover image for Let's create a Personal Website with Github and Medium or Dev.to Account.
Jijin P  πŸ‘¨β€πŸ’»πŸ¦„
Jijin P πŸ‘¨β€πŸ’»πŸ¦„

Posted on • Updated on

Let's create a Personal Website with Github and Medium or Dev.to Account.

I have created a simple personal website maker with Github, Dev.to or Medium. Simple configuration. All it needs is your username on Github and Dev/Medium.

GitHub logo PJijin / Personal-Website

πŸ™‹β€β™‚οΈCreate your personal website and blog with Github, Medium or Dev

Personal Website Template

Other projects:

  • πŸ™ Cover Image Generator - Generate a cover image for your blog post online.
  • πŸ”– MarkDown - Live Markdown Generator
  • πŸ—’ Paper - A "no-cloud" note taking app with "networkless" sharing.
  • πŸ‘¨β€πŸ’» ShowPath - Learning Path for Programmers

Personal Website

Code with β™₯️


repo size Donate

Features ✨

Automatically shows your GitHub public repo, blog posts (dev.to or medium) on your personal website.

  • Show Github Repo

  • Show Medium or Dev.to Blog Posts

Usage

  1. Clone the Repository

     git clone https://github.com/PJijin/Personal-Website.git
    
  2. Run this command to install dependencies

     npm install
    
  3. Open src/config.js and then enter your social media account username.

  4. Customize about us page from src/components/About/about.js

  5. Run

    npm run start
    

🀝 Contributing

Contributions, issues and feature requests are welcome!

Show your support

Give a ⭐️ if this project helped you!




The website consists of Github repository portfolio and blog posts from Dev.to or Medium, About Us Section, Basic Profile information.

Hit ⭐️ if you like the project 😍, Feel free to open issues πŸŽ‰

Github: https://github.com/PJijin/Personal-Website

Demo: https://personal-website.pjijin1.now.sh/

Follow On Twitter: https://twitter.com/PJijin

Usage

1 Clone the Repository

 git clone https://github.com/PJijin/Personal-Website.git
Enter fullscreen mode Exit fullscreen mode

2 Run this command to install dependencies

 npm install
Enter fullscreen mode Exit fullscreen mode

3 Open src/config.js and then enter your social media account username, name, title.

const config = {
    name: 'Jijin',
    title: "Hi I'm Jijin πŸ‘‹πŸ»",
    blog: 'Dev', // Dev.to or Medium (Make blank if you don't need the blog)

    // Social media profile username
    github: '', // [REQUIRED] Github Username
    twitter: '', // Twitter Username
    stackoverflow: '', // Eg: 3211944
    medium: '', // without @ symbol
    instagram: '',
    dev: 'pjijin',
    youtube: '', // Channel ID
    linkedin: ''
};


Enter fullscreen mode Exit fullscreen mode

4 Customize about us page from src/components/About/about.js

5 Run

npm run start
Enter fullscreen mode Exit fullscreen mode

Discussion (4)

Collapse
markel profile image
Markel F.

Wow I love the idea, especially if you don't have to much time for creating an entire new website.

I was thinking, wouldn't it be useful to use environmental variables instead of a js file? It would allow for much better upgradability.

Collapse
pjijin profile image
Jijin P πŸ‘¨β€πŸ’»πŸ¦„ Author

Thank You.

Yeah. it can be moved to environmental variables. I will refactor the code soon!!! πŸ˜ƒ

Collapse
josecage profile image
JosΓ© Cage

Just tested and I think I will use for my site.

Actual: josecage.github.io 🚒

Congrats for your project.

Collapse
pjijin profile image
Jijin P πŸ‘¨β€πŸ’»πŸ¦„ Author

Awesome πŸ₯°