Hello, Holle, I’m Li Bai!!
This is the end of the project.
This is a small project on the way to the whole stack. From the design, front-end, back-end, and server-side, all the way through the rapid learning, the quantity is ecstatic~~
I have been exposed to third-party website systems such as WordPress and hexo. Although it is simple, I feel that it is too redundant and cumbersome, too messy, and various restrictions and experience are not good.
So I decided to write my own world,I am the creator and the seeker。
The front and back stages are designed with great efforts. The overall style is simple style. When people reach a certain stage, their minds tend to be more and more simple,Minimalism may be the ultimate destination。
“Online humble, get a star https://github.com/wsydxiangw… “
- Project deployment
- Local development
- Front page
- back-stage management
- Gossips and whispers
According to this tutorial, even if you don’t understand the code, you can also own a website system of your own. The background settings are perfect, covering the normal blog functions!!
- Pull project wood in GitHub
configIn the folder
nginx.confFile, need to specify their own domain name, there are notes in the file.
- In the server directory, create
dataFolder as project directory
config3 folders and
- Open the server terminal and install it
docker(installation tutorial reference: https://docs.docker.com/engin… ）~~
- After the installation is successful, enter the
docker-compose up -dFor deployment
docker ps -aSee if it works, perfect~~
OK, that’s it,“Docker force”
Front desk website: http://aa.com In the background: http://aa.com/admin There’s no problem here~~
“Key points: enter the background first and set up the basic information. Then the front desk can have normal access. Otherwise, it will report an error. OK, perfect. Go home and have a meal to celebrate ~ ~”
One word for deployment, docker is delicious
(Note: to step 5, if the prompt does not exist, install according to the prompt
docker-compose, I remember it seems necessary. I don’t have to spend any time here ~ ~)
1. First, you need to install the database on your computer
Running mongodb service。
2. Add the following contents to the local hosts file:
127.0.0.1 web 127.0.0.1 server 127.0.0.1 mongodb
dockerWhen deploying, you need to connect containers with different host names, so you need to specify the names of different projects!!
Beginners have not yet found a better way, if any, welcome to give advice~~
3. Project initiation
NPM install each directory must npm run dev ## web npm run serve ## admin & server
4. After opening, you need to enter the management background and fill in the information on the first screen before you can access the front desk normally. Otherwise, the front desk will report an error.
(er… I’m lazy here. I didn’t deal with it. There’s no need to deal with it.)
5. It will be ok if there is“Suggestions / optimizations / bugs”You can GitHub at any time「Issues」I, thank you for your support!!
Technology stack used
- The bottom three designers are all racking their brains
- The front desk is a little bit more in viewPlain brocade(open source project)
- Server side rendering framework of Vue Nuxt.js
- The styles are all hand written
Front and back station: PC and mobile have been adapted
- Recently, I found that some mobile phone browsers are not compatible. I only have a millet, which is not easy to test, so please forgive me
“The foreground page is not mapped. You can look at my website directly https://raindays.cn “
Many people see the website, as long as it is their own website, are calledBlog
Yeah? I don’t like this word very much. I prefer to call it:Mood town or Heart station
The page is very simple, the function is also very simple, so simple that maybe only the first screen of the home page can make people feel a trace of amazing.
It is mainly open to passers-by, tourists and all people. It can comment and view without registering an account.
Come to see your website, is to give you face, comment is also interesting to you. Why don’t you want me to register an account so that I can comment and view articles?? Farewell (full score for friendliness)
This is mine“Mood town”or“Heart station”, covering the functions of mainstream blogs
#Home page #Article details (comment function #Article list (summary of data #Phrase list (send a circle of friends #Subscription notice #Personal introduction (naive bravery #Rainy day (serene or beautiful
A total of 7 pages, it is relatively simple, the normal personal website, the above should have functions, there should be some animation transition also have, fancy No.
Although sparrow small five viscera complete, a complete display of a person’s emotions, the heart of what they want
Only administrators can enter the background, so only the pictures in the background can be put
Note: the picture is the first version, the function of subsequent update does not update the picture
The first time you enter the background, you need to register your account first. The account can only be registered once to avoid being forgotten. If you have forgotten, operate the database by yourself
The effect of the input box imitates the Nuggets, people are always envious of things that are forced by cattle~~
The summary of all the data is like the cost of living every month. If you don’t keep an account, do you know how much you eat all year round and how many pieces of trouser pockets you have left.
Local tyrant & moonlight clan is another matter. If you have a rich woman, please contact me. The mailbox is at the bottom
Well, I’ll give it directly [email protected]
Upload background image and background music, upload to the server by default, can be selected in setting
For website performance, it is recommended to compress the images and upload them according to the specified size
Hidden article, how to say, happy is good~~
Editors are mainstreamMarkdownIf you can’t, I sincerely suggest that you learn the three steps in one minute
- Take out the pen and paper and write
- Take out the mobile phone, clap, paper
- Upload to Nuggets
One minute from entry to give up, use hand pen to write, take photos and post articles. People who know how to innovate are always at the forefront
Others laugh that I am too crazy, I laugh others can not see through
Can delete, reply to comments, view the current comment of the article, is not allowed to edit
What people say is from the heart. Even if the emperor and Laozi come, they will not give them privileges!!
Note: the first screen information needs to be filled in completely before the front desk can be accessed normally (the filing information is optional)
- Background information: nickname, avatar, etc. (the avatar is unified in the front and background)
- Website information: website name, description, SEO, etc
- Front page: home page information, background music of different pages, and record information at the bottom
- Personal introduction: the personal introduction page of the front desk, let you know you for a while ~ ~ (please refer to my website)
- Upload file: upload pictures and music. You can specify the upload location. The default is the server (alicloud OSS is optional)
- Email type: at present, only QQ and 163 email are supported (other required mailbox can be expanded by themselves)
- Comment function: nickname, mailbox, administrator logo (the front page highlights the administrator’s logo)
- Comment ID: that is, the administrator ID, which is confirmed according to the comment email and nickname
- Comment notification: when a comment is posted, an email is sent to notify the respondent
- Subscription notification: when publishing an article, group e-mail notifies the subscribed mailbox
- Pass code: to enable the notification function, you need to fill in this code, which can be obtained in the mailbox settings (open the SMTP server), and it should be consistent with the filled email
- Change Password: need the original password, forget to do it by yourself~~
(tip: you can view F12 for your saved account and password)
(be sure to fill in the basic information completely, so as to avoid the ignorance bug. If you want to solve the problem, ask me for 10 yuan. Don’t bargain, unless you introduce me a girlfriend.)
Front page logo
- Find the directory and replace the pictures in it (4 needed, please refer to the original pictures) (/ Web / static / image / logo /)
- Two logo on the front page: 456 * 200 (one white and one black transparent)
- Logo of sub page: 200 * 200
- ICO icon in tab bar: optional
Another: the size of the logo can be similar, you can debug it yourself, upload a variety of pictures when the logo is also OK, mainly depends on personal hobbies
Note: logo support
iconfontIcon, specific can see the source code (for some people who do not understand the operation, so use the picture here)
I didn’t expect this design. Would you like to give me a score? Please comment on it. Hahaha~~
Online humble, GitHub here, the first time to post for a star
As the saying goes, “do what you want to do, you can’t be careless for a moment.”.
Technical notes have its significance of existence. Paper books recognize their own value and always know how to survive.
After all, no rules, no square!
For my website, many netizens ask if there is a template, certainly not, this is my own handwritten ah. Of course, I understand that students who ask these questions still need time to hone their current abilities or ideas.
Therefore, I decided to open source, so that even mice, rabbits and cabbages can operate a simple system of sending articles, taking notes and personal introduction.
After this period of day and night toss, finally ended, with practical operation to consolidate the past learning, more in-depth understanding
nuxtThe way to learn code is to dig and fill all the way.
As long as you have something to return to, the scenery along the way, no matter good or bad, will become the most beautiful and unforgettable existence in memory. It’s a worthwhile trip.
If you rely too much on something, you may have worries about everything, you can’t allow yourself to pursue yourself, or you may not say a word one day. What is the significance of my existence??
I often remind myself that learning and continuous progress are the ultimate destination. Only what belongs to me is the ultimate source of security.
Don’t you understand? can’t?? It’s OK. I can learnIf you can’t learn, you have to work harder, pay twice or three times the time and sincerely to learn. Sooner or later, you will learn.
Share their own a simple project stack to everyone, interested can learn, whatSuggestions / bugs / optimizations can be mentionedThank you!!.
The most important point is to find a star
There should be no problem here, if there are any loopholes, please contact me, thank you~~
I can do things, you can; others will, we can do the same, please believe in yourself, there is nothing in the world is impossible, come on!!
Thank you for your support. Please accept your advice and suggestions
Looking forward to working with students with technical requirements [email protected]
(at the beginning, I feel something is wrong with the code. It seems that there are too many words, but they can’t be regarded as mood articles. I’d like to delete them as soon as possible. I guess the most annoying thing for technical masters is long speeches
The unknowns in life are always changeable, which makes people have to give in to reality. After 25 days, they formally joined the front-end talent pool and began to look for new directions and opportunities.
————July 25, 2020 12:30